Active link zone in javascript???

[skizo]

hi there,

is there anyway we can define an active link zone in javascript?

let's say i've got an image of 600px by 200px and i only want a 100px by 100px zone of the image to by a link to something else, is that possible using any javascript code (or any other code)?

thanx for helping a newbie...

[jscheuer1]

One generally uses an image map for that. You can Google 'image map' to find information. I personally recommend a freeware image map generating program:
Meracl ImageMap Generator

[cr3ative]

http://gethelp.devx.com/techtips/web.../10min0699.asp

Frontpage also has a tool to do this automatically.

cr3ative

[skizo]

hey, thanx guys!
i'll try with image map...
the only thing is that i would like to implant image map into a javascript fade-in slideshow, but i guess that's probably too touchy...

anyway, thanx again!

[jscheuer1]

If you pick a slide show that can handle HTML as well as straight images, it should be no problem. Did you have any particular slide show in mind?

[skizo]

ya, this one:

<script type="text/javascript">

//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var slideshow_width='600px' //SET IMAGE WIDTH
var slideshow_height='200px' //SET IMAGE HEIGHT
var pause=50 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="img/test_img_blue2.gif"
fadeimages[1]="img/test_img.gif"

////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length+1)? nextimageindex=1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
// -->


</script>

[jscheuer1]

This script is not designed to accept HTML, exactly. However, what I think of as the 'action line' in the script does use HTML. That line is:

tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'

this is where the switching takes place. We could change it to allow a call to an external HTML file or, in your case, HTML code for an image map. This would also require us to deal differently with preloading the images and unless they all would be used as image maps, some flag set to distinguish pure images from image maps. I don't have time just at the moment to do this. If you could be as specific as possible in describing exactly what you want this script to do that it doesn't do now. That would probably help me when I get around to it. One other note: for older browsers, this script displays a plain slideshow. That part would probably be best left as is.

[jscheuer1]

You may have trouble following this but, I think it fits the bill, just be very observant and you will be fine. Tested and works here. It is a drop-in replacement for the DD demo of the Fade-Image Slideshow script, using the same images and allowing for image maps, one of which is used in the demo. Click on the couple's heads in the first image to see it in action.

<html>
<head>
<title>Fade Image w/Image Map Demo</title>
</head>
<body>

<script language="JavaScript1.2" type="text/javascript">

/***********************************************
* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Modified Here to optionally Use Image Maps
* Modifications © John Davenport Scheuer - jscheuer1DELETETHESECAPSFOREMAILADDRESS@comcast.net
***********************************************/

var slideshow_width='140px' //SET IMAGE WIDTH
var slideshow_height='225px' //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET DISPLAY CONTENT. Extend or contract array as needed
//May contain image tags and/or image maps only, no display text.
//Escape line-breaks with \
fadeimages[0]='<img src="photo1.jpg" usemap="#1" name="image one" alt="image one" border="0">\
<map name="1">\
<area shape="circle" coords="75,56,41" href="http://www.dynamicdrive.com" \
target="_blank" title="Dynamic Drive Scripts Library"><area shape="default" nohref>\
</map>'
fadeimages[1]='<img src="photo2.jpg">'
fadeimages[2]='<img src="photo3.jpg">'

var loadimages=new Array()
//SET IMAGE PATHS FOR PRELOADING. Extend or contract array as needed
loadimages[0]="photo1.jpg"
loadimages[1]="photo2.jpg"
loadimages[2]="photo3.jpg"


////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<loadimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=loadimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+loadimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=fadeimages[nextimageindex]
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj2.style.visibility="hidden"
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
tempobj.style.visibility="visible"
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=loadimages[curimageindex]
curimageindex=(curimageindex<loadmages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML=fadeimages[curimageindex]
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
</body>
</html>

Of course, this assumes you've figured out how to create an image map.

[skizo]

hey, thanx man!

everything (with a little code modication) works pretty much the way i wanted to.

you're of great help my friend, thanx again!
only need to check if that is cross-browser compatible...

i'll comeback soon with some other questions; need to make an image cross-wipe from top to bottom when an html page loads , got the cross-wipe code, but can't seem to get it working on load...

cya!

[jscheuer1]

What I wrote is crossbrowser compatible IE6, NS7.2 FF1.0.2, degrades well in older browsers - simple slide show only.