Entry
JavaScript: Image: Clickable: How to create a clickable OnMouseOver / OnMouseOut image link?
Jan 25th, 2005 11:08
Knud van Eeden,
----------------------------------------------------------------------
--- Knud van Eeden --- 26 January 2005 - 00:50 am --------------------
JavaScript: Image: Clickable: How to create a clickable OnMouseOver /
OnMouseOut image link?
---
Method: Use an image in a link, where you load first load the images,
then load them via the events onmouseover and onmouseout
--- cut here: begin --------------------------------------------------
in general:
Steps: Overview:
1. -First you load the 2 onmouseover and onmouseout imagefiles in an
'Image()'
(which avoids having to reload the imagefiles all the time from
disk, which might be slow)
<!-------------------------------------------------------------------->
<SCRIPT>
<!-------------------------------------------------------------------->
var yourimagenameonmouseoverG = new Image();
var yourimagenameonmouseoutG = new Image();
yourimagenameonmouseoverG.src = "yourimageonmouseoverfilename";
yourimagenameonmouseoutG.src = "yourimageonmouseoutfilename";
<!-------------------------------------------------------------------->
</SCRIPT>
<!-------------------------------------------------------------------->
2. -Then you create the clickable image
1. with the URL where it should goto when clicked upon
2. with one of the images already loaded in the IMG
<!-------------------------------------------------------------------->
<A
HREF="your url"
ONMOUSEOVER='
document.yourIMGname.src=yourimagenameonmouseoverG.src;
'
ONMOUSEOUT='
document.yourIMGname.src=yourimagenameonmouseoutG.src;
'
>
<!-------------------------------------------------------------------->
<IMG
NAME="yourIMGname"
SRC="yourimageonmouseoutfilename"
>
<!-------------------------------------------------------------------->
</IMG>
<!-------------------------------------------------------------------->
</A>
<!-------------------------------------------------------------------->
--- cut here: end ----------------------------------------------------
---
---
So e.g. all together:
--- cut here: begin --------------------------------------------------
<!-------------------------------------------------------------------->
<HTML>
<!-------------------------------------------------------------------->
<A
HREF="http://www.faqts.com"
ONMOUSEOVER='
document.yourIMGname.src=yourimagenameonmouseoverG.src;
'
ONMOUSEOUT='
document.yourIMGname.src=yourimagenameonmouseoutG.src;
'
>
<!-------------------------------------------------------------------->
<IMG
NAME="yourIMGname"
SRC="c:/bbc/taal/fotoknud.jpg"
WIDTH="100"
HEIGHT="100"
>
<!-------------------------------------------------------------------->
</IMG>
<!-------------------------------------------------------------------->
</A>
<!-------------------------------------------------------------------->
<SCRIPT>
<!-------------------------------------------------------------------->
var yourimagenameonmouseoverG = new Image();
var yourimagenameonmouseoutG = new Image();
yourimagenameonmouseoverG.src = "c:/bbc/taal/fotoknud2002.jpg";
yourimagenameonmouseoutG.src = "c:/bbc/taal/fotoknud.jpg";
<!-------------------------------------------------------------------->
</SCRIPT>
<!-------------------------------------------------------------------->
</HTML>
<!-------------------------------------------------------------------->
--- cut here: end ----------------------------------------------------
---
---
Tested successfully on Microsoft Windows XP Professional, running
Microsoft Internet Explorer v6.0
---
---
Book: see also:
---
[book: author: Heinle, Nick / Pe<n~>a, Bill - title: Designing with
JavaScript - 'Dynamic images']
---
---
Internet: see also:
---
JavaScript: Image: Clickable: Link: Overview: Can you give an overview
of links?
http://www.faqts.com/knowledge_base/view.phtml/aid/33571/fid/122
----------------------------------------------------------------------
