Forum Moderators: open
I have several links in a menu system where I want a small jpeg file to appear next to the link when the user hovers over it. The thing is the image is static indicating (also) which page is active.
The arrow here represents the image and is contained in a small cell. Each link has a cell.
->Company
Link 2
Link 3
Link 4
So i want the arrow to move from company to Link 3 if the user hovers over it. Is this very easy to achieve.
thanks for your time.
If so, you could use jscript that does 2 image changes on a one link roll. In other words, have the default image for the company to show the arrow and the default images for the links to be blank images. When you roll over the lower links, swap the company image with a blank image and the other links with the arrow.
Is this making sense?
If you need an example of a 2 image single link rollover, I could post the code for you.
I usually use a variable for this, sometimes in the URL but more often coded on the page.
thispage="link3"; <- also one of the image names
Use it:
1) When placing the images in the menu, and
2) When triggered by the mouseover
1)
function hiliteHere() {
//build the object reference
currpage=eval(thispage+"_here");
//swaps the "here" image
document.images[thispage].src=currpage.src;
}
<body onload="setTimeout('hiliteHere()',500)">
2)
//no rollover swap if it's the "here" image
if (thisimage.name!=thispage) { doSwap(); }
(Sorry 'bout the eval(), Bernard ... :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
li{list-style-type:none;}
</style>
<script type="text/javascript">
function liHvr(li_var){
document.getElementById("ulTitle").style.listStyleType="none";
li_var.style.listStyleType="square";
}
function liOut(li_var){
li_var.style.listStyleType="none";
document.getElementById("ulTitle").style.listStyleType="square";
}
</script>
</head>
<body>
<ul>
<li id="ulTitle" style="list-style-type:square;">Title line</li>
<li onmouseover="liHvr(this);" onmouseout="liOut(this);"><a href="#">link 1</a></li>
<li onmouseover="liHvr(this);" onmouseout="liOut(this);"><a href="#">link 2</a></li>
<li onmouseover="liHvr(this);" onmouseout="liOut(this);"><a href="#">link 3</a></li>
<li onmouseover="liHvr(this);" onmouseout="liOut(this);"><a href="#">link 4</a></li>
</ul>
</body>
</html>
<HTML>
<HEAD>
<title>Arrow Test</title>
<script language="JavaScript">
<!--
if (document.images) {
image1on = new Image();
image1on.src = "navimages/arrowon.gif";
image1off = new Image();
image1off.src = "navimages/arrowblank.gif";
image2on = new Image();
image2on.src = "navimages/arrowon.gif";
image2off = new Image();
image2off.src = "navimages/arrowblank.gif";
image3on = new Image();
image3on.src = "navimages/arrowon.gif";
image3off = new Image();
image3off.src = "navimages/arrowblank.gif";
}
function turnOn(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "on.src");
}
}
function turnOff(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "off.src");
}
}
if(document.images)
{
display1 = new Image();
display1.src = "navimges/arrowblank.gif";
art1 = new Image();
art1.src = "navimges/arrowblank.gif";
}
//-----------------------------------------------------------------------------
function another_image(imgName)
{
if(document.images)
{
descrimgOn = eval(imgName + ".src");
document["art1"].src = descrimgOn;
}
}
//-----------------------------------------------------------------------------
function another_image_off(imgName)
{
if(document.images)
{
descrimgOff = eval(imgName.src);
document["art1"].src = "navimages/arrowon.gif";
}
}
//-->
</script>
</head>
<body>
<img src="navimages/arrowon.gif" width=8 height=8 border=0 name="art1" alt="test">Company<br>
<img src="navimages/arrowblank.gif" width=8 height=8 border=0 name="image1"><a href="" onMouseOver="another_image('display1'); turnOn('image1'); self.status='Link 1'; return true" onMouseOut="another_image_off('art1'); turnOff('image1')">Link 1</a><br>
<img src="navimages/arrowblank.gif" width=8 height=8 border=0 name="image2"><a href="" onMouseOver="another_image('display1'); turnOn('image2'); self.status='Link 2'; return true" onMouseOut="another_image_off('art1'); turnOff('image2')">Link 2</a><br>
<img src="navimages/arrowblank.gif" width=8 height=8 border=0 name="image3"><a href="" onMouseOver="another_image('display1'); turnOn('image3'); self.status='Link 3'; return true" onMouseOut="another_image_off('art1'); turnOff('image3')">Link 3</a><br>
</body>
</html>
I think Rambo's works best for what i need, but how would i make the list-style-type become my graphic ? And also is it easy to apply this to a whole cell instead of just the URL?
thanks fellas .. top notch.
li {list-style-image:url(path/imagename.png)}
Thanks guys.
