onmouseover

[cyprien]

ok, i have a table with two cells...

is there a way to have a list of text(not really a list, but links) in one table and have a transparent graphic in the other but when you 'mouse over' a certain word in the first cell have it change the image in the second cell and when you aren't hovering over the text have it go back to the transparent image?

if so, how? :beam:

thanks in advance.

[DDD]

onMouseover="this.className='your class here';"

Then in that class have your bgrd image and whatever set. and of course do one for onMouseout.

[Marz]

DDD has it somewhat correct.... But unless you know exactly what he meant.. I'm sure you just went.... :h: HUH?! :h:

*lol*... Ill further elborate what he was trying to show you...

First you need to make a set of styles... Easy enough.. This goes in the :HEAD: area of your HTML file.



<style>
.imgd {background-image: url(???.jpg); height: ???; width: ???;
background-repeat: no-repeat}
.img1 {background-image: url(???.jpg); height: ???; width: ???;
background-repeat: no-repeat}
.img2 {background-image: url(???.jpg); height: ???; width: ???;
background-repeat: no-repeat}
.img3 {background-image: url(???.jpg); height: ???; width: ???;
background-repeat: no-repeat}
</style>


Now.. In th above section.. You'll want to make sure each class has the url area specified logo.jpg or whatever you want... the height and width of the .jpg can be done in any measurement.. But for this sake.. Do it in pixels.. : BTW, the .imgd will be the default image that you will see when you don't have any links highlighted.

Now.. Staying in the :HEAD: section of the document, we want to write the actual JavaScript code that runs this entire base of operations.



<SCRIPT LANGUAGE="JavaScript">

function toggleImg(changeThis)
{
document.all.toggleThis.className = changeThis
}
</SCRIPT>


Now.. We move onto the actual body code that you would need to use while doing this.



// Set up the small table as a small reference
<table width=500 cellspacing=0 cellpadding=5 border=1>
<tr>
<td width=250>
<a href="link1.html" onmouseover="toggleImg(img1)" onmouseout="toggleImg(imgd)">Link 1</a><br>
<a href="link2.html" onmouseover="toggleImg(img2)" onmouseout="toggleImg(imgd)">Link 2</a><br>
<a href="link3.html" onmouseover="toggleImg(img3)" onmouseout="toggleImg(imgd)">Link 3</a><br>
</td>
<td width=250>
<span id="toggleThis" class="imgd"></span>
</td>
</tr>
</table>


and I think that should cover just about everything.. If you have any more questions be sure to ask. :)