ページナビゲーションの画像

Question

私は要素、私たちについて、私たちが何をしているのか、クライアント、お問い合わせなど.....これらのすべてが画像です。テキストではありません。私は選択された$の値に基づいてどのページが選択されたかを認識することができます。 $ selected == aboutとすると、私たちのabout_selected.pngのようなものであり、他のすべてのものについても同じであるという私たちのデフォルトイメージが欲しいです。どうすればこれを達成できますか？私はjavascriptを試みたが、それを正しく得ることができなかった。ここに私のページのサンプルコードがあります：

<a href="about.php" class="<?php if($selected =="about"){echo 'selected';}?>" onmouseover="document.about.src='images/About_over.png'" onmouseout="document.about.src='images/About.png'" ><img src="images/About.png" alt="about us" name="about" /></a></li> 
<li><a href="we_do.php" class="<?php if($selected =="do"){echo 'selected';}?>" onmouseover="document.wedo.src='images/Wedo_over.png'" onmouseout="document.wedo.src='images/Wedo.png'" ><img src="images/Wedo.png" alt="what we do" name="wedo"/></a></li> 

Answer 1

解決方法は自分のコードです。

<img src="images/About<?php if($selected =="about"){echo '_selected';}?>.png" 

Answer 2

ここで使用しているインラインJavaScriptの代わりに、これらのマウスオーバーエフェクトにCSSを使用するとよいでしょう。リスト外はそれにsome useful informationを持っています。

'selected'クラスを使用して、バックグラウンドイメージで3番目の 'アクティブ'状態をトリガすることができます。タグの間にテキストを置いて、検索エンジンがあなたのナビゲーションのインデックスを作成できるようにすることをお勧めします。 CSSを使って実際のテキストを表示させないようにすることができます（負のテキストインデントが普通です）