Hello,
For my top navigation, I have a row of text links link1 link2 link 3 and so on
On the next row i have a picture associated with each of the links...img 1 img2 img 3 and so on
I want to following actions:
1) On rollover on an image link i want it to add a border to the image to highlight the image
2) On rollover on an image link i want textlink to be highlighted to red color.
3) On rollover on a text link i want it to add a border to the image to highlight the image
4) On rollover on a text link i want textlink to be highlighted to red color.
In short I want the image to be highlighted with red border and the text link to change color to red whenevr mouse is hovered over eithe text link or the image link.
I can not make it work properly when all 4 actions are taking place. at a time only three of them are taking place.
I am using
1.swap image function for changing the image to show red border around the image.
2. change property function to change the color of text link when hover mouse over the image map
Here is the code:
<html xmlns="
http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_pre
loadImages
.arguments
; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=
a[i])&&x.o
Src;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&p
arent.fram
es.length)
{
d=parent.frames[n.substrin
g(p+1)].do
cument; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;
i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.
layers.len
gth;i++) x=MM_findObj(n,d.layers[i]
.document)
;
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arg
uments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=
3)
if ((x=MM_findObj(a[i]))!=nul
l){documen
t.MM_sr[j+
+]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_changeProp(objName,x,th
eProp,theV
alue) { //v6.0
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")
==-1 || obj.style)){
if (theValue == true || theValue == false)
eval("obj."+theProp+"="+th
eValue);
else eval("obj."+theProp+"='"+t
heValue+"'
");
}
}
</script>
<style type="text/css">
<!--
a { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #ff0000;
text-decoration: none;
}
-->
</style>
</head>
<body onload="MM_preloadImages('
images/hea
der_01_red
.gif','ima
ges/header
_02_red.gi
f')">
<table width="79px" border="0" cellspacing="0" cellpadding="0" align=center>
<tr>
<td bgcolor="#000000" align=center>
<a href="#" onmouseover="document.myim
age1.src='
images/hea
der_01_red
.gif';" onmouseout="document.myima
ge1.src='i
mages/head
er_01.gif'
;"> <div id="link1" >eat</div></a>
</td>
</tr>
<tr>
<td> <img src="images/header_01.gif"
name="myimage1" width=79 height=117 border="0" usemap="#myimage1Map" ></td>
</tr>
</table>
<map name="myimage1Map" id="myimage1Map">
<area shape="circle" coords="42,57,37" href="#" onmouseover="MM_swapImage(
'myimage1'
,'','image
s/header_0
1_red.gif'
,1);MM_cha
ngeProp('l
ink1','','
style.colo
r','#ff000
0','DIV')"
onmouseout="MM_swapImgRest
ore();MM_c
hangeProp(
'link1',''
,'style.co
lor','#fff
fff','DIV'
)" />
</map>
</body>
</html>
I have uploaded the images and this page at
http://www.huestechnologies.com/demo/rollover.htmlHere the textlink is not changing to red.
while in other file where i changed the code to
<td bgcolor="#000000" align=center>
<div id="link1" ><a href="#" onmouseover="document.myim
age1.src='
images/hea
der_01_red
.gif';" onmouseout="document.myima
ge1.src='i
mages/head
er_01.gif'
;"> eat</a></div>
</td>
</tr>
the text link is changing but hovering the mouse over the image is not changing the color of text link.
the second example is at
http://www.huestechnologies.com/demo/rollover2.htmlIs there any other simpler way to achieve this functionality?
I posted this question here because I think this can be done with css with / without using javascript.
Start Free Trial
