eBook authors eBook Software - create and publish your own ebooks
Create your own eBooks
 
   
EBookApprentice.com
Learn How To Create, Publish & Market E-Books
 
   
EBookCompiler.com
E-Book Creation Software
 
   
EBookPower.com
Add sophisticated multimedia to your E-Books
 
   
CoverFactory.com
Create E-Book covers in minutes
 
 
  EBookSubmit.com
E-Book Marketing & Promotion made easy
 
  EBookJungle.com
Search engine for E-Books
 
  EBookInterviews.com
Interviews with eBook authors
 
  EBookEnhance.com
Tools for building better eBooks
 
 
 
Archived Message:

Programming "Mouse Over"


 
authorbook I'm looking for step-by-step programming code (HTML or "scripts" or ???) for doing "mouse-over" for web page hyperlinks. Anyone know of a good Internet source for the code? (especially something with some "guidance".
Some of the samples I found on the Web look like they are in Chinese, and I only speak English.

Posted on: 9:49 pm on April 28, 2003
KC I can give you sample code if that's any help. It'll probably still look like chinese if you don't understand the code but I'll explain briefly what's going on.

Firstly, you need to pre-load the images. This makes sure that the images are not reloaded every time a user hovers over the links. You could use something like this (put it between the head tags on your page):

[code]
<script language="JavaScript">

var imgover = new Array;
var imgout = new Array;

for(var x=1; x<5; x++)
{
imgover[x] = new Image(140, 40);
imgout[x] = new Image(140, 40);
imgover[x].src = "/images/imgover" + x + ".gif";
imgout[x].src = "/images/imgout" + x + ".gif";
}

function swapit(lnk,srce){
if(document.images) {
document[lnk].src= eval(srce + ".src"
}
}

</script>
[/code]

That code will preload eight images of dimensions 140 by 40 pixels:

imgover1.gif
imgover2.gif
imgover3.gif
imgover4.gif

and

imgout1.gif
imgout2.gif
imgout3.gif
imgout4.gif

It presumes these are stored in a folder on your server named 'images' but you can remove the '/images/' part if they are stored in the same location as your page.

These images are now stored in the arrays named 'imgover' and 'imgout', ready for use. To use them, links could be something like these:

[code]
<table align="center" border="0" cellpadding="0" cellspacing="0" height="79">
<tr>
<td width="60">
<a href="page1.htm" target="_top"
onMouseOver="swapit('lnk1','imgover[1]'),window.status='Page 1'; return true"
onMouseOut="swapit('lnk1','imgout[1]'),window.status=' '; return true">
<img src="/images/imgout1.gif"
alt="Page 1" border="0" name="lnk1" width="140" height="40"></a>
<br />
<a href="page2.htm" target="_top"
onMouseOver="swapit('lnk2','imgover[2]'),window.status='Page 2'; return true"
onMouseOut="swapit('lnk2','imgout[2]'),window.status=' '; return true">
<img src="/images/imgout2.gif"
alt="Page 2" border="0" name="lnk2" width="140" height="40"></a>
<br />
<a href="page3.htm" target="_top"
onMouseOver="swapit('lnk3','imgover[3]'),window.status='Page 3'; return true"
onMouseOut="swapit('lnk3','imgout[3]'),window.status=' '; return true">
<img src="/images/imgout3.gif"
alt="Page 3" border="0" name="lnk3" width="140" height="40"></a>
<br />
<a href="page4.htm" target="_top"
onMouseOver="swapit('lnk4','imgover[4]'),window.status='Page 4'; return true"
onMouseOut="swapit('lnk4','imgout[4]'),window.status=' '; return true">
<img src="/images/imgout4.gif"
alt="Page 4" border="0" name="lnk4" width="140" height="40"></a>
</td>
</tr>
</table>
[/code]

When a user hovers over the images the function (swapit) is called and the img src for that image  ( see name="lnk1", name="lnk2", name="lnk3" and name="lnk4" )  is changed to imgover[whatever]. OnMouseOut the function is called again and imgout[whatever] is displayed.


There are plenty of other ways to do this but the above is quite straightforward. I know it's not a 'tutorial' as such but it should help get you started. Here's the code for a complete test page if you want to play around with it:

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<title>Image Rollovers</title>

<script language="JavaScript">

var imgover = new Array;
var imgout = new Array;

for(var x=1; x<5; x++)
{
imgover[x] = new Image(140, 40);
imgout[x] = new Image(140, 40);
imgover[x].src = "/images/imgover" + x + ".gif";
imgout[x].src = "/images/imgout" + x + ".gif";
}

function swapit(lnk,srce){
if(document.images) {
document[lnk].src= eval(srce + ".src"
}
}

</script>

</head>

<body>
<table width="140" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="140">
<a href="page1.htm" target="_top"
onMouseOver="swapit('lnk1','imgover[1]'),window.status='Page 1'; return true"
onMouseOut="swapit('lnk1','imgout[1]'),window.status=' '; return true">
<img src="/images/imgout1.gif"
alt="Page 1" border="0" name="lnk1" width="140" height="40"></a>
<br />
<a href="page2.htm" target="_top"
onMouseOver="swapit('lnk2','imgover[2]'),window.status='Page 2'; return true"
onMouseOut="swapit('lnk2','imgout[2]'),window.status=' '; return true">
<img src="/images/imgout2.gif"
alt="Page 2" border="0" name="lnk2" width="140" height="40"></a>
<br />
<a href="page3.htm" target="_top"
onMouseOver="swapit('lnk3','imgover[3]'),window.status='Page 3'; return true"
onMouseOut="swapit('lnk3','imgout[3]'),window.status=' '; return true">
<img src="/images/imgout3.gif"
alt="Page 3" border="0" name="lnk3" width="140" height="40"></a>
<br />
<a href="page4.htm" target="_top"
onMouseOver="swapit('lnk4','imgover[4]'),window.status='Page 4'; return true"
onMouseOut="swapit('lnk4','imgout[4]'),window.status=' '; return true">
<img src="/images/imgout4.gif"
alt="Page 4" border="0" name="lnk4" width="140" height="40"></a>
</td>
</tr>
</table>

</body>
</html>

[/code]

(Edited by KC at 8:48 pm on April 29, 2003)


Posted on: 7:01 pm on April 29, 2003
rlemire Want an easier solution with no JavaScript programing required?

<html>
<head>
<title>My Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="GoldPannerDemo.jgp">

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onload="preloadImages(image2.gif)">

<div id="GPLayer8" onMouseOut="GPshow(9,1)"
style="position:absolute; width:35px; height:35px; z-index:1; left: 100px; top: 50px">
<a href="mypage.htm" TARGET="top">My Page</a>
<img src="image2.gif" width="35" height="35" name="image8"></div>

<div id="GPLayer9" onMouseOver="GPshow(9,0)"
style="position:absolute; width:35px; height:35px; z-index:2; left: 100px; top: 50px">
<img src="image1.gif" width="35" height="35" name="image9"></div>

</body>
</html>

How it works...

For each web page link, you need two identical Layers (i.e. GPLayer8 and GPLayer9, 1 above the other). GPLayer9 holds the "steady state" image and GPLayer8 holds the "roll over" image.

When you mouseOver GPLayer9, the image in GPLayer9 is hidden and you "see" the image for GPLayer8. Clicking the image in GPLayer8 will send you to your new web page. If you change your mind and do not click the image but move your mouse off GPLayer8 then the image in GPLayer9 is "restored" and GPLayer8 becomes hidden completing the roll-over effect.

Showing and hiding these Layer images is controlled by a FREE JavaScript module contained in the JavaScript file GoldPannerDemo.jgp. A demo download from my site contains eight FREE special effects modules that can be added to your page using Cut & Paste from templates.


Posted on: 10:33 pm on June 1, 2003

Go to Active Discussion Thread

Participate in Current/New Discussions

List All Archived Forums



Copyright © 2000-2015, Answers 2000 Limited.

With any business, it is up to the individual owner of said business to ensure the success of the business. You may make more or less than any sample figures or results that might be quoted on our web sites or other publications. All business involves risk, and many businesses do not succeed. Further, Answers 2000 Limited does NOT represent that any particular individual or business is typical, or that any results or experiences achieved by any particular individual/business is necessarily typical.

Disclosure: Our company's websites' content (including this website's content) includes advertisements for our own company's websites, products, and services, and for other organization's websites, products, and services. In the case of links to other organization's websites, our company may receive a payment, (1) if you purchase products or services, or (2) if you sign-up for third party offers, after following links from this website. Unless specifically otherwise stated, information about other organization's products and services, is based on information provided by that organization, the product/service vendor, and/or publicly available information - and should not be taken to mean that we have used the product/service in question. Additionally, our company's websites contain some adverts which we are paid to display, but whose content is not selected by us, such as Google AdSense ads. For more detailed information, please see Advertising/Endorsements Disclosures

Our sites use cookies, some of which may already be set on your computer. Use of our site constitutes consent for this. For details, please see Privacy.

Contact Us    About and Terms Of Use    Privacy    Advertising/Endorsements Disclosures