PDA

View Full Version : change image on list over



d-machine
07-07-2008, 02:35 PM
Hi

I've got a list with few links and images:



<ul id="idList">
<li class="iactive"><a href="#"><img src="2.gif" alt="" border="0" />pap1</a></li>
<li><a href="#"><img src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#"><img src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#"><img src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#"><img src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#"><img src="1.gif" alt="" border="0" />good</a></li>
</ul>


Except for the first list, I want that the whole other lists will change the image 1.gif onmouseover to 3.gif

it is important that it won't be regular image change onMouseOver, because I want that also when the mouse will be on the word "good" the image will be changed.


Thank you very much!

allahverdi
07-07-2008, 02:46 PM
<ul id="idList">
<li class="iactive"><a href="#"><img src="2.gif" alt="" border="0" />pap1</a></li>
<li><a href="#"><img src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#" onmouseover="getElementById('myimg1').src='3.gif'"><img id="myimg1" src="1.gif" alt="" border="0"/>good</a></li>
<li><a href="#" onmouseover="getElementById('myimg2').src='3.gif'"><img src="1.gif" id="myimg2" alt="" border="0"/>good</a></li>
<li><a href="#" onmouseover="getElementById('myimg3').src='3.gif'"><img src="1.gif" id="myimg3" alt="" border="0"/>good</a></li>
<li><a href="#" onmouseover="getElementById('myimg4').src='3.gif'"><img src="1.gif" id="myimg4" alt="" border="0"/>good</a></li>
</ul>

I'm not js expert but try this out

jscheuer1
07-07-2008, 02:52 PM
Except for the first list? You have only shown us one list. I think you meant 'list item'.

Even so, it still isn't clear what must change, but I am assuming something like so will do:


<ul id="idList">
<li class="iactive"><a href="#"><img src="2.gif" alt="" border="0" />pap1</a></li>
<li><a href="#" onmouseover="document.images['limg1'].src = '3.gif';"><img name="limg1" src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#" onmouseover="document.images['limg2'].src = '3.gif';"><img name="limg2" src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#" onmouseover="document.images['limg3'].src = '3.gif';"><img name="limg3" src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#" onmouseover="document.images['limg4'].src = '3.gif';"><img name="limg4" src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#" onmouseover="document.images['limg5'].src = '3.gif';"><img name="limg5" src="1.gif" alt="" border="0" />good</a></li>
</ul>

I'm also assuming that you want them to change back onmouseout. If so, add the corresponding onmouseout event to each link, example:


onmouseout="document.images['limg1'].src = '1.gif';"

Just be sure to use the matching ['limg#'] for each one.

d-machine
07-07-2008, 04:58 PM
Except for the first list? You have only shown us one list. I think you meant 'list item'.

Even so, it still isn't clear what must change, but I am assuming something like so will do:


<ul id="idList">
<li class="iactive"><a href="#"><img src="2.gif" alt="" border="0" />pap1</a></li>
<li><a href="#" onmouseover="document.images['limg1'].src = '3.gif';"><img name="limg1" src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#" onmouseover="document.images['limg2'].src = '3.gif';"><img name="limg2" src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#" onmouseover="document.images['limg3'].src = '3.gif';"><img name="limg3" src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#" onmou

seover="document.images['limg4'].src = '3.gif';"><img name="limg4" src="1.gif" alt="" border="0" />good</a></li>
<li><a href="#" onmouseover="document.images['limg5'].src = '3.gif';"><img name="limg5" src="1.gif" alt="" border="0" />good</a></li>
</ul>

I'm also assuming that you want them to change back onmouseout. If so, add the corresponding onmouseout event to each link, example:


onmouseout="document.images['limg1'].src = '1.gif';"

Just be sure to use the matching ['limg#'] for each one.

Your'e my hero! ;)

thank you both

allahverdi
07-07-2008, 05:14 PM
No problems. Happy when i can help you :)