...

View Full Version : OnMouseover Background



Erindesign
02-15-2007, 08:34 PM
Hey All,

I'm making my own rating system:

1 table cell, with 5 links inside. when I hover over the link, I want the cell background to change to the desired image so that it interacts depending on what rating you are about to give. Basically, I suck at javascript. It's supposed to be a simple function like getelementbyid. blablabal idk. and call the function on mouse over? anyone have any idea?

thanks in advance,
erind

Mr J
02-15-2007, 08:48 PM
Here's one possiblity


<table border="1">
<td>
<a href="#null" onmouseover="this.parentNode.style.backgroundImage='url(pic1.jpg)'">Link 1</a><BR>
<a href="#null" onmouseover="this.parentNode.style.backgroundImage='url(pic2.jpg)'">Link 2</a><BR>
<a href="#null" onmouseover="this.parentNode.style.backgroundImage='url(pic3.jpg)'">Link 3</a><BR>
<a href="#null" onmouseover="this.parentNode.style.backgroundImage='url(pic4.jpg)'">Link 4</a><BR>
<a href="#null" onmouseover="this.parentNode.style.backgroundImage='url(pic5.jpg)'">Link 5</a><BR>
</td>
</tr>
</table>

Erindesign
02-15-2007, 09:07 PM
That's what I want, but with a function so it looks nicer and I don't have to use those humangous anchor tags. just something like <a href="#vote" onmouseover="rating(image1.gif)" .....

Mr J
02-15-2007, 10:35 PM
Here's 2 to choose from



<script type="text/javascript">

function rating(pic){

document.getElementById("mycell").style.backgroundImage="url("+pic+")"

}


</script>

<table border="1" width="100">
<td id="mycell">

<a href="#vote" onmouseover="rating('pic01.jpg')">Link 1</a><BR>
<a href="#vote" onmouseover="rating('pic02.jpg')">Link 2</a><BR>
<a href="#vote" onmouseover="rating('pic03.jpg')">Link 3</a><BR>
<a href="#vote" onmouseover="rating('pic04.jpg')">Link 4</a><BR>
<a href="#vote" onmouseover="rating('pic05.jpg')">Link 5</a><BR>

</td>
</tr>
</table>

Or


<script type="text/javascript">

arr=[
"pic1.jpg",
"pic2.jpg",
"pic3.jpg",
"pic4.jpg",
"pic5.jpg"
]

onload=function(){
myCell=document.getElementById("mycell")
myLinks=myCell.getElementsByTagName("A")

for(var i=0;i<myLinks.length;i++){
myLinks[i].i=i

myLinks[i].onmouseover=function(){
myCell.style.backgroundImage="url("+arr[this.i]+")"
}

}

}

</script>

<table border="1" width="100">
<td id="mycell">

<a href="#vote">Link 1</a><BR>
<a href="#vote">Link 2</a><BR>
<a href="#vote">Link 3</a><BR>
<a href="#vote">Link 4</a><BR>
<a href="#vote">Link 5</a><BR>

</td>
</tr>
</table>

</BODY>
</HTML>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum