Happy Halloween guys!!!
Today, I decided to introduce you a little but useful HTML tools.
Rollover Images
If you need some small kind of animated images, this is easy and cool.
I’ll make a button using rollover image tool for sample. If you’re using Dreamweaver, you can do it so easy.
Just go to Insert->Image Objects-> Rollover Image. If you get there, I’ll see a window like this:
Image name: name of the rollover image
Original image: original image that when mouse cursor away from the image
Rollover Image: Image that when mouse cursor over the image, original image is changed by this image
When clicked, Go to URL: you can use this image as a link.
If you’re using regular text editor copy this code and change the image URLs:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script 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];}
}
//–>
</script>
</head>
<body onload=”MM_preloadImages(‘http://www.logoogle.com/images/logooward/january 05/simpsonsedition.png’)”>
<a href=”http://www.google.com” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘Image1′,”,’http://www.logoogle.com/images/logooward/january 05/simpsonsedition.png’,1)”><img src=”http://www.logoogle.com/images/logooward/january%2005/google-moogle.jpg” name=”Image1″ border=”0″ id=”Image1″ /></a>
</body>
</html>
Try this code to copy in a html file.
Mapping
If you need to make multiple links on a single image, mapping will help you. I suggest that, you need to use special text editors for web site e.g Dreamweaver and Frontpage if you want to use this tool, because you will need coordinates of the picture that saying which part points to the link. For Dreamweaver, just insert the image you want, then go to properties (it’s usually in bottom), there is part that named Map. You should choose shape of the link and draw on the image part, then give URL. That’s all.
