Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 291
  • Last Modified:

Change image and link color on mouseover

I want to have a bullet and a text link next to each other that both change on mouseover. It has to work with IE4+ and Netscape4+.

If possible, the code to put in the <body> should look like this:

functionname('url.htm','frame','text','color','mouseovercolor','active color','visitedcolor','bulletname', 'originalbulletfilename','changebulletfilename')

(with or without <SCRIPT>  </SCRIPT>)

where

functionname is the name of the function
url.htm is the target URL
frame is the frame where the new URL should be placed
text is the text of the link
color is the initial text color of the link
mouseovercolor is the mouseover text color of the link
*active color is the active text color of the link
*visitedcolor is the visited text color of the link
bulletname (if needed) is the name of the bullet
originalbulletfilename is the filename of the initial bullet
changebulletfilename is the filename of the changed bullet

   * if there is an other solution for these settings then they can be omitted.

With this code I should be able to create a menu like this:

o  Home
o  Gallery
o  Pictures
o  About us

So when the mouse is over the word “Pictures” the text should change color and the bullet should be replaced by another. On mouseout everything should change back to normal.

Why a complex solution like this?

If you have a menu with a lot of options you can use the same bullet for every option and if normal text can be used than everything can be kept very small (transfer time) and the option text is easy to change and/or added.

I want a copy and paste solution because I am not familiar with java and/or javascript.

0
Filips
Asked:
Filips
  • 4
  • 3
1 Solution
 
SmackedCommented:
This code uses CSS A:Hover to change the link color. I couldn't get it to do it in javascript but i know you can, somehow. However it does change the bullet type. The is a different property called liststyleimage that u may want to look into.

see: http://www.w3.org/TR/REC-CSS1#list-style-image

heres the code:

<HTML>
<HEAD>
<TITLE></TITLE>
<style>

A:Hover {color:red}

</style>
<script>
<!--
function swapBullet(bulletType,menuItem)
{
      document.all['list1'].style.listStyle = bulletType;
      //document.all['item1'].style.fontcolor = "#FFFFFS";      
}
//-->
</script>
</HEAD>
<BODY>

<P>&nbsp;</P>
<ul id=list1 name=list1>
<li><span name=item1 id=item1><a href="#" onMouseOver="swapBullet('square','item1')" onMouseOut="swapBullet('disc','item1')">Item 1</a></span>
<li><span name=item2 id=item2><a href="#" onMouseOver="swapBullet('square','item2')" onMouseOut="swapBullet('disc','item2')">Item 2</a></span>
</ul>
</BODY>
</HTML>
0
 
SmackedCommented:
note: you dont' need to sent the function the name of the item. thats there incase u do the color changes in javascript
0
 
kollegovCommented:
The problem is that under NN you can not change color of text (link) dynamically.
Thus you have only the following options

1. and simplest if you have not much text. Use images for text too and swap images.

2. create 2 overlayed divs one initially invisible and than swap it's visibility.





0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
SmackedCommented:
This was supposed to be an answer:

This code uses CSS A:Hover to change the link color. I couldn't get it to do it in javascript but i know you can, somehow. However it does change the bullet type. The is a different property called liststyleimage that u may want to look into.

see: http://www.w3.org/TR/REC-CSS1#list-style-image 

heres the code:

<HTML>
<HEAD>
<TITLE></TITLE>
<style>

A:Hover {color:red}

</style>
<script>
<!--
function swapBullet(bulletType,menuItem)
{
document.all['list1'].style.listStyle = bulletType;
//document.all['item1'].style.fontcolor = "#FFFFFS";
}
//-->
</script>
</HEAD>
<BODY>

<P>&nbsp;</P>
<ul id=list1 name=list1>
<li><span name=item1 id=item1><a href="#" onMouseOver="swapBullet('square','item1')" onMouseOut="swapBullet('disc','item1')">Item 1</a></span>
<li><span name=item2 id=item2><a href="#" onMouseOver="swapBullet('square','item2')" onMouseOut="swapBullet('disc','item2')">Item 2</a></span>
</ul>
</BODY>
</HTML>
0
 
SmackedCommented:
rubbish. u can dynamicaly change text colours in NN. i just can't remember how... :(
0
 
kollegovCommented:
Smacked, your one wouldn't work for NN4, (read question) I think you must withdraw your 'answer'

<html>
<head>
<!------------------------
    LINK HIGHLIGHT SCRIPT
        By Virtual_Max
     http://come.to/vmax    
-------------------------->
<style TYPE="text/css">
 .ITEM
    {color:blue;}
 .HITEM
    {color:red;}
</style>
<script language="JavaScript1.1">
<!--
var MIE=(navigator.appName.indexOf("Explorer")!=-1)&&(parseInt(navigator.appVersion)>=4);
var NN =(navigator.appName.indexOf("Netscape")!=-1)&&(parseInt(navigator.appVersion)>=4);
var OTHER=((!MIE)&&(!NN));
var hcolor="red";
var icolor="blue";

function showit(dname,sw)
{if(sw) sh='show';
 else   sh='hide';
 document[dname+'2'].visibility=sh;
}

function makeit(lname,txt,url,targ,outbullet,overbullet)
{if(!targ) targ="_self";
if(OTHER)
 {s='<A HREF='+url+' TARGET="'+targ+'">'+txt+'</a>';
  document.writeln(s);
 }
if(MIE)
 {s='<A HREF='+url;
  s+=' TARGET="'+targ+'" ';
  s+='onMouseOver="this.style.color=hcolor" ';
  s+='onMouseOut="this.style.color=icolor" ';
  s+='>'+txt+'</a>';
  document.writeln(s);
 }
if(NN)
 {s='<ILAYER ID="'+lname+'1" >'
  s+=' <A HREF="'+url+'"  CLASS="ITEM" ';
  s+=' TARGET="'+targ+'" ';
  s+=' onMouseOver="showit(\''+lname+'\',true);" ';
  s+=' onMouseOut="showit(\''+lname+'\',false);" ';
  s+=' >'+outbullet+txt+'</a>';
  s+='</ILAYER>';

  s+='<LAYER ID="'+lname+'2" VISIBILITY="HIDE">';
  s+=' <A HREF="'+url+'" CLASS="HITEM" ';
  s+=' TARGET="'+targ+'" ';
  s+=' onMouseOver="showit(\''+lname+'\',true);" ';
  s+=' onMouseOut="showit(\''+lname+'\',false);" ';
  s+=' >'+overbullet+txt+'</a>';
  s+='</LAYER>';
  document.writeln(s);
  x=document[lname+'1'].pageX;
  y=document[lname+'1'].pageY;
  document[lname+'2'].top=y;
  document[lname+'2'].left=x;
  document[lname+'2'].visibility="hide";
 }
}

//-->
</script>
</head>


<body>
<h1> Demo </h1>
<script>
makeit('L1','Yahoo','http://www.yahoo.com','_self','<img src="outbullet.gif" border=0>','<img src="overbullet.gif" border=0>');
</script>

</body>
</html>
Virtual_Max
0
 
FilipsAuthor Commented:
Hi Virtual Max,

In NN it works but in MIE the image doesn't show up.

Can you fix that please?

Thanks
Filips
0
 
kollegovCommented:
Fixed :-) Sorry, forgot to add bullet code into MIE branch.
Note also that in bullet codes <IMG src=some.gif border=0> can't contain " chars now.

<html>
<head>
<!------------------------
    LINK HIGHLIGHT SCRIPT
        By Virtual_Max
     http://come.to/vmax    
-------------------------->
<style TYPE="text/css">
 .ITEM
    {color:blue;}
 .HITEM
    {color:red;}
</style>
<script language="JavaScript1.1">
<!--
var MIE=(navigator.appName.indexOf("Explorer")!=-1)&&(parseInt(navigator.appVersion)>=4);
var NN =(navigator.appName.indexOf("Netscape")!=-1)&&(parseInt(navigator.appVersion)>=4);
var OTHER=((!MIE)&&(!NN));
var hcolor="red";
var icolor="blue";

function showit(dname,sw)
{if(sw) sh='show';
 else   sh='hide';
 document[dname+'2'].visibility=sh;
}

function makeit(lname,txt,url,targ,outbullet,overbullet)
{if(!targ) targ="_self";
if(OTHER)
 {s='<A HREF='+url+' TARGET="'+targ+'">'+txt+'</a>';
  document.writeln(s);
 }
if(MIE)
 {s='<A HREF='+url;
  s+=' TARGET="'+targ+'" ';
  s+='onMouseOver="this.innerHTML=\''+overbullet+txt+'\'; this.style.color=hcolor" ';
  s+='onMouseOut="this.innerHTML=\''+outbullet+txt+'\';this.style.color=icolor" ';
  s+='>'+outbullet+txt+'</a>';
  document.writeln(s);

 }
if(NN)
 {s='<ILAYER ID="'+lname+'1" >'
  s+=' <A HREF="'+url+'"  CLASS="ITEM" ';
  s+=' TARGET="'+targ+'" ';
  s+=' onMouseOver="showit(\''+lname+'\',true);" ';
  s+=' onMouseOut="showit(\''+lname+'\',false);" ';
  s+=' >'+outbullet+txt+'</a>';
  s+='</ILAYER>';

  s+='<LAYER ID="'+lname+'2" VISIBILITY="HIDE">';
  s+=' <A HREF="'+url+'" CLASS="HITEM" ';
  s+=' TARGET="'+targ+'" ';
  s+=' onMouseOver="showit(\''+lname+'\',true);" ';
  s+=' onMouseOut="showit(\''+lname+'\',false);" ';
  s+=' >'+outbullet+txt+'</a>';
  s+='</LAYER>';
  document.writeln(s);
  x=document[lname+'1'].pageX;
  y=document[lname+'1'].pageY;
  document[lname+'2'].top=y;
  document[lname+'2'].left=x;
  document[lname+'2'].visibility="hide";
 }
}

//-->
</script>
</head>


<body>
<h1> Demo </h1>
<script>
makeit('L1',"&quot;Yahoo&quot;",'http://www.yahoo.com','_self','<img src=outbullet.gif border=0>','<img src=overbullet.gif border=0>');
</script>

</body>
</html>
0

Featured Post

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.

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