Your assistance please if you can help [Archive]

Shaun

12-16-2002, 12:29 PM

I run a web site at www.champcarnews.com and although the site is reasonable so I am told, I am keen to make some adjustments.

the one thing I would like to do is to have an image at the top of the page fixed in a location which rolls over to a new image each time a link further further down the page is passed over with the mouse.

I know how to do this with a basic image and a link using the Dreamweaver 4 package for a one off link and I know how to do swap images

but I am at a loss to see how for example

12 different links in a column can show up 12 different images in the same spot on the page at the same time. Somone told me it could be done using java but this is not an area I am famliar with, can this be doen and can this be done using Dreamweaver 4

so any assistance would be appreciated

regards

Shaun
www.champcarnews.com

khalidali63

12-16-2002, 10:35 PM

here you go,

Let me know if you come accross any problems
Copy all of the code below in the body section and njoy

<Script Language="JavaScript">
/*
In the code below I have assumed that in this directory where this html file is,
there is an image directory that has 3 images buttin1.gif and so on.
make sure you chane Image paths to appropriate image paths in your system.

If you desire to dd more images then just the path values in the indexArray
indexArray[4] = "<img src=\"images/button3b.gif\" width=\"167\" height=\"27\" alt=\"Third Image\" border=\"0\">";
indexArray[5] = "<img src=\"images/button3b.gif\" width=\"167\" height=\"27\" alt=\"Third Image\" border=\"0\">";

and so on.Once this is done the create relative table cells just like below,
the only parameter u will need to change in the function calls in mouse over or out events is the index value.it should
follow the sequence.

In case you want to change the default image that displays all the time when user is not initiating a mouseover event
then put the default image path in the
indexArray[0] = "here default image path"

Let me know if you have n e more questions on this

Khalid Ali

*/
var indexArray = new Array();
indexArray[0] = "Image will be displayed in this space.";
indexArray[1] = "<img src=\"images/button1b.gif\" width=\"167\" height=\"27\" alt=\"First Image\" border=\"0\">";
indexArray[2] = "<img src=\"images/button2b.gif\" width=\"167\" height=\"27\" alt=\"Second Image\" border=\"0\">";
indexArray[3] = "<img src=\"images/button3b.gif\" width=\"167\" height=\"27\" alt=\"Third Image\" border=\"0\">";
function swapImage(index,command){
var obj = document.getElementById("imageDisplay");
if(index>0 && command=='on'){

obj.innerHTML = indexArray[index];
}else{
obj.innerHTML = indexArray[0];
}
}
</Script>

</head>

<body>
<div id="imageDisplay" style="position:absolute;width:200pt; height:50pt;">Image will be displayed in this space.</div>

<span id="links" style="position:absolute;margin-top:50pt;">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td>
<a href="somepage.html" onmouseover="swapImage(1,'on');" onmouseout="swapImage(1,'off');">First Link 1</a>
</td>
</tr>
<tr>
<td>
<a href="somepage.html" onmouseover="swapImage(2,'on');" onmouseout="swapImage(2,'off');">Second Link 2</a>
</td>
</tr>
<tr>
<td>
<a href="somepage.html" onmouseover="swapImage(3,'on');" onmouseout="swapImage(3,'off');">Third Link 3</a>
</td>
</tr>
</table>
</span>