• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2792
  • Last Modified:

rollover image to change text color and viceversa

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_preloadImages.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.oSrc;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&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; 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.length;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.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_changeProp(objName,x,theProp,theValue) { //v6.0
  var obj = MM_findObj(objName);
  if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
    if (theValue == true || theValue == false)
      eval("obj."+theProp+"="+theValue);
    else eval("obj."+theProp+"='"+theValue+"'");
  }
}
</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/header_01_red.gif','images/header_02_red.gif')">
<table width="79px" border="0" cellspacing="0" cellpadding="0" align=center>
  <tr>
    <td bgcolor="#000000"  align=center>
     <a href="#" onmouseover="document.myimage1.src='images/header_01_red.gif';" onmouseout="document.myimage1.src='images/header_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','','images/header_01_red.gif',1);MM_changeProp('link1','','style.color','#ff0000','DIV')" onmouseout="MM_swapImgRestore();MM_changeProp('link1','','style.color','#ffffff','DIV')" />
</map>
</body>
</html>

I have uploaded the images and this page at http://www.huestechnologies.com/demo/rollover.html

Here 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.myimage1.src='images/header_01_red.gif';" onmouseout="document.myimage1.src='images/header_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.html

Is 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.
0
soniya
Asked:
soniya
  • 6
  • 4
1 Solution
 
radnorCommented:
<html>
<head>
<title>test1</title>
<style>
a {
      text-decoration:none;
}
img {
      border: medium solid rgb(255,255,255);
}

</style>
<script type="text/javascript">
function lon(parm) {

      link = document.getElementById('pl' +parm)
      link.style.border = 'medium solid rgb(255,0,0)';
      link = document.getElementById('tl' + parm)
      link.style.color = 'red';
}
function loff(parm) {
      link = document.getElementById('pl' + parm);
      link.style.border = 'medium solid rgb(255,255,255)';
      link = document.getElementById('tl' + parm);
      link.style.color = 'black';
}
</script>
</head>
<body>
<a href="#" onmouseover="javascript:lon(1)" onmouseout="javascript:loff(1)"><img id='pl1' src='pt.png' ></a><br>
<a id='tl1' href="#" onmouseover="javascript:lon(1)" onmouseout="javascript:loff(1)">text link</a><br>
<a href="#" onmouseover="javascript:lon(2)" onmouseout="javascript:loff(2)"><img id='pl2' src='pt.png' ></a><br>
<a id='tl2' href="#" onmouseover="javascript:lon(2)" onmouseout="javascript:loff(2)">text link</a><br>

</body>
</html>
0
 
soniyaAuthor Commented:
Great,
this looks so simple and works perfectly.
But I have the images in circles and link.style.border creates a rectangular border.
I need to replace the image with black circular border to an image with red circular border.
I can call the image with red circles using function lon.
Please help me where and how to define the image which is to be swaped, when mouse hovers.
I also need to preload the images with red border.
thanks
soniya
0
 
radnorCommented:
I created 2 GIF(s), 1 "off" black text/black border and "on" red text/border to SWAP images on rollover.  Same code, just swap images in and out VIA rollover...

The 2nd line that follows is the key....
      link = document.getElementById('pl' +parm)
      link.src = 'on.gif';
It will change the pic from off state to on state on mouse over condition and back again on mouseout.



<html>
<head>
<title>test1</title>
<style>
a {
      text-decoration:none;
}
img {
      border: medium solid rgb(255,255,255);
}

</style>
<script type="text/javascript">
function lon(parm) {

      link = document.getElementById('pl' +parm)
      link.src = 'on.gif';
      link = document.getElementById('tl' + parm)
      link.style.color = 'red';
}
function loff(parm) {
      link = document.getElementById('pl' + parm);
      link.src = 'off.gif';
      link = document.getElementById('tl' + parm);
      link.style.color = 'black';
}
</script>
</head>
<body>
<a href="#" onmouseover="javascript:lon(1)" onmouseout="javascript:loff(1)"><img id='pl1' src='off.gif' ></a><br>
<a id='tl1' href="#" onmouseover="javascript:lon(1)" onmouseout="javascript:loff(1)">text link</a><br>
<a href="#" onmouseover="javascript:lon(2)" onmouseout="javascript:loff(2)"><img id='pl2' src='off.gif' ></a><br>
<a id='tl2' href="#" onmouseover="javascript:lon(2)" onmouseout="javascript:loff(2)">text link</a><br>

</body>
</html>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
radnorCommented:
All from YOUR code above....

<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_preloadImages.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];}}
}
</script>

and....

<body onload="MM_preloadImages('images/header_01_red.gif','images/header_02_red.gif')">
0
 
soniyaAuthor Commented:
Thanks Radnor

That works prfectly.
The only thing is that I need a series of links ( 9 links). So need 9 different images for

link.src = 'on.gif';
link.src = 'off.gif';

Just wondering how to define a series of images .

Thought of using only the black stroke and red stroke with transparent background for all the image links but that will not work as placing them directly with precision on the background images will not be possible. So I need to use different images like the images which I used at the link http://www.huestechnologies.com/demo/rollover.html

Thanks a lot for your help.
Soniya

0
 
radnorCommented:
Glad to hear it works for you.

Hope you dont mind, but....  Persoanlly, I did not care for the red text on black.  It did not have enoungh contrast for me.  How about a red bg with black text?


"... Thought of using only the black stroke and red stroke with transparent background for all the image links but that will not work as placing them directly with precision on the background images will not be possible. ..."  

Why not???   Can you use absolute positioning?
0
 
radnorCommented:
Ok, so how about this???

http://www.mtmwd.com/area51/ee/test1.htm

You will see the 3 images I use there.  I think the resolution should be higher.  Can see some jagged edges...
0
 
soniyaAuthor Commented:
Thank you so much for your help.

Strokes with transparency will cause this jagged edges. We cant remove them. They will render perfect only with solid background. Earlier I used only images in circles with transparent background, but whatever I did it did not work. That is why I had to use the solid background for the strokes. see http://www.experts-exchange.com/Web/Graphics/Photoshop/Q_21873567.html

I cant do much about the design as I was asked to work on a design by an artist. I just had to convert  a psd image to html with these functionalities
You can see the design at http://demo.eatdrinksleep.com/d8  use demo as username and password.

thanks
Soniya
0
 
radnorCommented:
I did not know if the resolution (increasing) would help with the jagged edges.  But there again, you will have a trade off with file size....  Maybe best with 2 images (on and off state).  The image you had looked small.

Glad to help.  GL with project.
0
 
soniyaAuthor Commented:
Could not solve this problem yet. But still trying :).
I was waiting for some other help so kept the question open.
Your help was great, will use this script somewhere else.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now