PDA

View Full Version : rollover div change

boggly
12-26-2002, 10:30 AM
Okay, here's the scenario:

I have a list of hypetext links. What I want to do is have an image load inside a div, that's next to the links, and change depending on the link that is currently being moused over. Any ideas?

~boggly
Mr J
12-26-2002, 01:30 PM
Is this any good to you.

Change pic1.jpg etc to your own images


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="JavaScript">
var Images = new Array("pic1.jpg","pic2.jpg","pic3.jpg") // list images to preload
var preloadImages=new Array() // preloads images
for (i=0;i<=Images.length-1;i++) {
preloadImages[i]=new Image()
preloadImages[i].src=Images[i]
}

LastID = ""

function ON(id){
(LastID != id?document.getElementById(id).src = "pic2.jpg":"")
}

function OFF(id){
(LastID != id?document.getElementById(id).src = "pic1.jpg":"")
}

function ACTIVE(id){
document.getElementById(id).src = "pic3.jpg"
if (LastID != ""){
(LastID != id?document.getElementById(LastID).src = "pic1.jpg":"")
}
LastID = id
}
// -->
</script>
</HEAD>
<BODY>

<a href="#null" onMouseOver="ON('image1');" onMouseOut="OFF('image1')" onClick="ACTIVE('image1')">Link One<img src="pic1.jpg" border="0" name="image1"></a>

<a href="#null" onMouseOver="ON('image2');" onMouseOut="OFF('image2')" onClick="ACTIVE('image2')">Link Two<img src="pic1.jpg" border="0" name="image2"></a>

<a href="#null" onMouseOver="ON('image3');" onMouseOut="OFF('image3')" onClick="ACTIVE('image3')">Link Three<img src="pic1.jpg" border="0" name="image3"></a>

<a href="#null" onMouseOver="ON('image4');" onMouseOut="OFF('image4')" onClick="ACTIVE('image4')">Link Four<img src="pic1.jpg" border="0" name="image4"></a>

<a href="#null" onMouseOver="ON('image5');" onMouseOut="OFF('image5')" onClick="ACTIVE('image5')">Link Five<img src="pic1.jpg" border="0" name="image5"></a>

<a href="#null" onMouseOver="ON('image6');" onMouseOut="OFF('image6')" onClick="ACTIVE('image6')">Link Six<img src="pic1.jpg" border="0" name="image6"></a>

</BODY></HTML>
boggly
12-27-2002, 07:54 AM
Pretty close, but I don't think I explained what I wanted very well. Your code seems to be specific to three images, and I need approximately four different images to load into a single div, depending on what text link is currently being moused over. The onclick handler would also be unnecessary, because I have another action that will occur when that happens. Thanks for the help though.

boggly
Algorithm
12-27-2002, 08:44 AM
How's this?

function changeImg(ImgName, newSrc){
if(document.getElementById && document.getElementById(ImgName) && newSrc){
changeImg.Back[ImgName] = document.getElementById(ImgName).src;
document.getElementById(ImgName).src = newSrc;
}
}
changeImg.Back = function(ImgName){
if(changeImg.Back[ImgName]){
document.getElementById(ImgName).src = changeImg.Back[ImgName];
}
}
boggly
12-27-2002, 09:18 AM
I'll definately try that Algorithm. I also found a simple solution that is only a single line long, which almost makes me feel embarassed for asking this in the first place. Thanks though.

boggly
Mr J
12-27-2002, 08:53 PM
Like this maybe?


<P><a href="page.html"onMouseOver="document.myimage.src='pic2.jpg'">one</a> <BR>
<a href="page.html"onMouseOver="document.myimage.src='pic3.jpg'">two</a><BR>
<IMG NAME="myimage" SRC="pic1.jpg" height="36" width="20" BORDER=0>