Forum Moderators: open

Message Too Old, No Replies

How to create roll over images beside actual image.

         

theadvocate

1:51 am on Jun 22, 2004 (gmt 0)

10+ Year Member



Hello,

I can do regular rollovers using the following very simple script:

<script type="text/javascript">
function replaceme(which,img) {
which.src = img;
}
function restoreme(which,img) {
which.src = img;
}
</script>

But that only swtiches out the images, one on top of the other. I need a script where where you hover over an image, and another image off to the side changes. Actually, I need both the image you hover over to change, and the additional text off to the side to appear.

I have found examples, but I don't know if I can post a link.

Any help is greatly appreciated :)

natty

11:41 am on Jun 22, 2004 (gmt 0)

10+ Year Member



stick the text in a div (span) give it an id

pass the switch funtion another couple of arguments (name/id, and new src)
and do the same
for the text in the div/span can do

if not ie4/ns4 i think

function replaceme(pic1,path1,pic2,path2,text1){
pic1.src = path1;
pic2.src = path2;
document.getElementById(text1).style.display = "inline"; //or "block" depending on span or div
}

function restoreme(pic1,path1,pic2,path2,text1){
//much the same apart from
document.getElementById(text1).style.display = "none";
}
or something of the sort

html
<img src="initial path" onmouseover="replaceme(this,'newpath','pic2id','path2','textid');" onmouseout="etc..." alt="" />
<span id="text1" style="display:none">text to appear</span>

i think