メニュー項目を画像に置き換える

通常のテキストリンクではなく、メニュー項目を画像（ロールオーバー付き）として表示する方法を探しています。私はモジュールMenu Iconsを見つけましたが、その名前が示すように、リンクの横にアイコンを配置するように設計されています。誰かがこれを行うためのテクニックを持っていますか？たぶん、私はある種のカスタムブロックまたはパネルを作成する必要がありますが、もっと簡単な方法があるのではないかと思いました。

メニューアイコンモジュールを使用して、探している機能を実装できます。これは複数回行っています。

画像をアイコンのような背景として配置するのではなく、CSS画像置換手法を使用して画像が表示されるように、menu_icons_css_item.tpl.phpファイルをカスタマイズするだけです。ロールオーバー機能の場合、画像アイコンモジュールを使用してアップロードする各画像には、メニュー画像の静的バージョンとロールオーバーバージョンを含める必要があります。

これは、以前使用したmenu_icon_css_item.tpl.phpファイルのサンプルコンテンツです。これはDrupal 6を対象としているため、Drupal 7を使用している場合は、一部の構文を更新する必要があります。

<?php
$base_url = $_SERVER['DOCUMENT_ROOT'];
$image_info = getimagesize($base_url.$path);
$width = $image_info[0];
$height = $image_info[1]/2;
?>

ul.links li.menu-<?php print $mlid ?> a {
  background-image: url(<?php print $path ?>);
  background-repeat: no-repeat;
  background-position: 0 0;
  height:<?php print $height?>px;
  text-align: left;
  text-indent: -9999px;
  width: <?php print $width?>px;
}

ul.links li.menu-<?php print $mlid ?> a:hover {
  background-position: 0 <?php print $height?>px;
}

テーマに顧客のmenu_icons_css_item.tpl.phpファイルを作成した後、以前にメニューアイコンモジュールが生成したCSSファイルを削除して、このテンプレートを使用して新しいファイルを生成する必要があります。これは、sites / default / filesフォルダーにあります。

もちろん、サイト管理者がDrupal UIを介してメニュー項目画像を更新することを許可する必要がない場合は、メニューアイコンのようなヘルパーモジュールを必要とせずに、テーマ内にCSS画像置換手法を実装するだけで済みます。