PDA

View Full Version : disjointed rollover

nali
03-02-2006, 07:38 PM
I am trying to make a rollover and I'm having trouble.....I have an example but I'm not sure what I am suposed to do with the "holder" here is a link to the site where I got my example from.....http://www.daxassist.com/js/disjointedtextlinks.cfm



this is the example I have........<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
//JavaScript Disjointed Text Links
//copyright © 2000 - 2003, Dax Assist
//visit http://www.daxassist.com for this and other javascripts
with full tutorials.

if(document.images) {
pics = new Array();
pics[1] = new Image();
pics[1].src = "clear.gif";
pics[2] = new Image();
pics[2].src = "pic1.gif";
pics[3] = new Image();
pics[3].src = "pic2.gif";
}
function changer(from,to) {
if(document.images) {
document.images[from].src = pics[to].src;
}
}
//-->
</SCRIPT>



<img name="holder" id="holder" src="clear.gif" alt="Holder"

width="96" height="87" hspace="30" border="0">



<a href="javascript:;" onMouseOver="changer('holder',2)"

onMouseOut="changer('holder',1)">Text Link 1</a>


okay, I changed the pictures to fit my needs but I even made them the same size as the ones here in this example but I don't know what to do with the "holder"

here is my version...........
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
//JavaScript Disjointed Text Links
//copyright © 2000 - 2003, Dax Assist
//visit http://www.daxassist.com for this and other javascripts
with full tutorials.

if(document.images) {
pics = new Array();
pics[1] = new Image();
pics[1].src = "images/tree5.gif";
pics[2] = new Image();
pics[2].src = "images/tree6.gif";
pics[3] = new Image();
pics[3].src = "images/tree7.gif";
}
function changer(from,to) {
if(document.images) {
document.images[from].src = pics[to].src;
}
}
//-->
</SCRIPT>


<img name="holder" id="holder" src="images/tree5.gif" alt="holder"
width="96" height="87" hspace="30" border="0">


<a href="javascript:;" onMouseOver="changer('holder',2)"
onMouseOut="changer('holder',1)">tree link</a>
videotoys
03-05-2006, 01:57 AM
Here's a simple script I use:

in the <head>

<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images)
{
img1 = new Image();
img2 = new Image();
img3 = new Image();
img4 = new Image();
img5 = new Image();
img6 = new Image();
img7 = new Image();
img8 = new Image();
img9 = new Image();

img1.src = "about.jpg";
img2.src = "custom.jpg"
img3.src = "free.jpg"
img4.src = "lapel.jpg"
img5.src = "off.jpg"
img6.src = "order.jpg"
img7.src = "small.jpg"
img8.src = "wall.jpg"
img9.src = "show.jpg"
}
</SCRIPT>

in the body:

<a href="ICS/freestanding/index.html" onmouseover="changeImage('image2','free.jpg')" id="image1" onmouseout="changeImage('image2','off.jpg')" id="image1">Freestanding- 1000 Series</a>

<div align="center" style="position:absolute; top:10; left:250;">
<img src="off.jpg" id="image2" width="225" height="300">
</div>

This changes an image in the center of the screen to different images as you rollover the links, I only included 1 of the links and changes to the img3 src, you can easily add another just by copying the first one and changing the free.jpg to your different images. maybe thall help.