Solved

Change image and link color on mouseover

Posted on 2000-04-27
8
275 Views
Last Modified: 2012-08-14
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
Comment
Question by:Filips
  • 4
  • 3
8 Comments
 
LVL 1

Expert Comment

by:Smacked
ID: 2757708
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
 
LVL 1

Expert Comment

by:Smacked
ID: 2757711
note: you dont' need to sent the function the name of the item. thats there incase u do the color changes in javascript
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2758004
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
 
LVL 1

Expert Comment

by:Smacked
ID: 2758022
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Expert Comment

by:Smacked
ID: 2758027
rubbish. u can dynamicaly change text colours in NN. i just can't remember how... :(
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2759122
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
 
LVL 6

Author Comment

by:Filips
ID: 2759326
Hi Virtual Max,

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

Can you fix that please?

Thanks
Filips
0
 
LVL 10

Accepted Solution

by:
kollegov earned 200 total points
ID: 2759652
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now