Topic: <area> tag and Javascript (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=26769" title="Pages that link to Topic: &lt;area&gt; tag and Javascript (Page 1 of 1)" rel="nofollow" >Topic: <area> tag and Javascript <span class="small">(Page 1 of 1)</span>\$

bikepunk Obsessive-Compulsive (I) Inmate From: Insane since: Sep 2005	posted 10-02-2005 13:42 Does the <area> tag stay in the defined place or can i use it in conjunction with a javascript random image loader, to have the defined ,area. be in alternating places? Let me be more obtuse. I need to have this : <p align="center"> <script language="JavaScript"> //By Paul Davis - www.kaosweaver.com var j,d="",l="",m="",p="",q="",z="",list= new Array() list[list.length]='img.jpg'; list[list.length]='img.jpg'; list[list.length]='img.jpg'; list[list.length]='img.jpg'; list[list.length]='img.jpg'; list[list.length]='img.jpg'; list[list.length]='img.jpg'; list[list.length]='img.jpg'; list[list.length]='img.jpg'; j=parseInt(Math.random()*list.length); j=(isNaN(j))?0:j; document.write("<img src='"+list[j]+"'>"); </script> and then in each img.jpg, i'd like to have a hotspot in a different place. Is this possible, or does the <area> tag pretty much lay in the one place, with no chance of positioning it in a different place in each image? Sorry for the repetitive-ness of the post/question. ?bp (Edited by bikepunk on 10-02-2005 13:47)
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 10-02-2005 15:13 bikepunk: First, welcome in the Asylum, You know to post a code snippet, it's nice to use the UBB codes. Since your tiny script document.write( ) an IMG tag, you can as well write the MAP and AREA tags associated with it. Use another array to store the attributes of the AREA, or make list a multidimensional array with all the infos. You could also get rid of that JavaScript and do the whole thing on server side, that way the users having disabled JavaScript ( or with no JavaScript at all ) could also browse your site.
bikepunk Obsessive-Compulsive (I) Inmate From: Insane since: Sep 2005	posted 10-02-2005 18:11 Thanks... uh... Where can I find a good resource for doing just that? (n00b question, i know, but thats why its here in the Stupid Basic Section...) This isnt for me, as well. Its for a client of my old lady, and he is an 'artsy-type' meaning he has said he likes to change the design of his site 4 times a year or more, and has NO clue about web-building. I think he's asking for something far beyond what his site is. (A tango dance, and 'esoteric B.S. thing... ugh. Thinking of a description is giving me a headache...) Obviously at this point I'm looking for the easy solution, so I don't have to do this again. (Or my old lady in this case...) the server-side solution is more than what Im looking for, but thanks. Maybe I can incorporate that in my own. so if i take the line... document.write("<img src='"+list[j]+"'>"); and change it like so... document.write("<img src='"+list[j]+"'> shape=rect cords= x and y coordinates of hotsopt href=www.otherpage.html "); or am i so lost i shouldn't even try? (Edited by bikepunk on 10-02-2005 18:20)
bikepunk Nervous Wreck (II) Inmate From: Insane since: Sep 2005	posted 10-02-2005 18:35 Ok... here is another example with better html. quote: <html> <head> <title></title> </head> <body> <img src="girl.jpg" width="640" height="480" border="0" usemap="#links" <map name="links"> <area coords="284,103,351,129" href="home1.html"> <area coords="247,127,284,151" href="home2.html"> </map> </body> </html> So if that is the area HTML, then how do i implement it with different images, and then can i have the <area> be in different places for each image? So a randomly loaded image on the entry page, with hotspots on it, but each image should have the hotspots in a different but defined place? thanks again. ?bp
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 10-02-2005 19:00 quote: he has said he likes to change the design of his site 4 times a year or more, and has NO clue about web-building. So you definitively should have a look at the CSS Zen Garden. You see, building a clean, valid and semantic (x)HTML markup will allow you, or anybody else, to "skin" it by just doing a .CSS file and some images. To learn about (x)HTML and CSS, you could head to w3schools.com and A List Apart. Check also the CSS (tutorials), CSS, HTML (tutorials) and HTML. To get back on topic, you should turn : code: document.write("<img src='"+list[j]+"' />"); into code: bla = "<img src='"+listImg[ j ]+"' usemap='#theMap'>\n<map name='theMap'>\n\t" bla += "<area href='"+ listHref[ j ] +"' shape='"+ listShape[ j ] +"' coords='"+ listCoords[ j ] +"' alt='' /></map>" document.write( bla ) Well I think you get the point. Check the official specs of HTML 4.01 > Objects, Images, and Applets > Client-side image maps: the MAP and AREA elements, for the possibilities and syntax of image maps. Hope that helps, (Edited by poi on 10-02-2005 19:09)
bikepunk Nervous Wreck (II) Inmate From: Insane since: Sep 2005	posted 10-03-2005 19:04 ... dear lord. Thanks so much. I actually went out and bought the CSS Zen Garden book, a month or two ago to try to teach myself how to to just those things. (easier to modify a small CSS file, than re-do a whole site regularly.) and I was insipred by it to delve into the deep end of HTML and CSS. The main problem for me now, is weaning my accomplice away flash as a site-building tool, and then, throwing down some basic HTML that is easy to work with. Thanks again for the tips, and everything.

Topic: <area> tag and Javascript (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=26769" title="Pages that link to Topic: &lt;area&gt; tag and Javascript (Page 1 of 1)" rel="nofollow" >Topic: <area> tag and Javascript <span class="small">(Page 1 of 1)</span>\$

bikepunk
Obsessive-Compulsive (I) Inmate

From:
Insane since: Sep 2005

posted 10-02-2005 13:42

Does the <area> tag stay in the defined place or can i use it in conjunction with a javascript random image loader, to have the defined ,area. be in alternating places?

Let me be more obtuse. I need to have this :

<p align="center">
<script language="JavaScript"> //By Paul Davis - www.kaosweaver.com
var j,d="",l="",m="",p="",q="",z="",list= new Array()
list[list.length]='img.jpg';
list[list.length]='img.jpg';
list[list.length]='img.jpg';
list[list.length]='img.jpg';
list[list.length]='img.jpg';
list[list.length]='img.jpg';
list[list.length]='img.jpg';
list[list.length]='img.jpg';
list[list.length]='img.jpg';
j=parseInt(Math.random()*list.length);
j=(isNaN(j))?0:j;
document.write("<img src='"+list[j]+"'>");
</script>

and then in each img.jpg, i'd like to have a hotspot in a different place. Is this possible, or does the <area> tag pretty much lay in the one place, with no chance of positioning it in a different place in each image?

Sorry for the repetitive-ness of the post/question.

?bp

(Edited by bikepunk on 10-02-2005 13:47)

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 10-02-2005 15:13

bikepunk: First, welcome in the Asylum,
You know to post a code snippet, it's nice to use the UBB codes.

Since your tiny script document.write( ) an IMG tag, you can as well write the MAP and AREA tags associated with it. Use another array to store the attributes of the AREA, or make list a multidimensional array with all the infos.

You could also get rid of that JavaScript and do the whole thing on server side, that way the users having disabled JavaScript ( or with no JavaScript at all ) could also browse your site.

bikepunk
Obsessive-Compulsive (I) Inmate

From:
Insane since: Sep 2005

posted 10-02-2005 18:11

Thanks...

uh...

Where can I find a good resource for doing just that? (n00b question, i know, but thats why its here in the Stupid Basic Section...)

This isnt for me, as well. Its for a client of my old lady, and he is an 'artsy-type' meaning he has said he likes to change the design of his site 4 times a year or more, and has NO clue about web-building. I think he's asking for something far beyond what his site is. (A tango dance, and 'esoteric B.S. thing... ugh. Thinking of a description is giving me a headache...)

Obviously at this point I'm looking for the easy solution, so I don't have to do this again. (Or my old lady in this case...)

the server-side solution is more than what Im looking for, but thanks. Maybe I can incorporate that in my own.

so if i take the line...
document.write("<img src='"+list[j]+"'>");

and change it like so...
document.write("<img src='"+list[j]+"'>
shape=rect
cords= x and y coordinates of hotsopt
href=www.otherpage.html

");

or am i so lost i shouldn't even try?

(Edited by bikepunk on 10-02-2005 18:20)

bikepunk
Nervous Wreck (II) Inmate

From:
Insane since: Sep 2005

posted 10-02-2005 18:35

Ok... here is another example with better html.

quote:
<html>

<head>
<title></title>
</head>
<body>

<img src="girl.jpg" width="640" height="480" border="0" usemap="#links"
<map name="links">
<area coords="284,103,351,129" href="home1.html">
<area coords="247,127,284,151" href="home2.html">
</map>
</body>
</html>

So if that is the area HTML, then how do i implement it with different images, and then can i have the <area> be in different places for each image? So a randomly loaded image on the entry page, with hotspots on it, but each image should have the hotspots in a different but defined place?

thanks again.

?bp

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 10-02-2005 19:00

quote:
he has said he likes to change the design of his site 4 times a year or more, and has NO clue about web-building.

So you definitively should have a look at the CSS Zen Garden. You see, building a clean, valid and semantic (x)HTML markup will allow you, or anybody else, to "skin" it by just doing a .CSS file and some images. To learn about (x)HTML and CSS, you could head to w3schools.com and A List Apart. Check also the CSS (tutorials), CSS, HTML (tutorials) and HTML.

To get back on topic, you should turn :

code:

document.write("<img src='"+list[j]+"' />");

into

code:

bla = "<img src='"+listImg[ j ]+"' usemap='#theMap'>\n<map name='theMap'>\n\t"
bla += "<area href='"+ listHref[ j ] +"' shape='"+ listShape[ j ] +"' coords='"+ listCoords[ j ] +"' alt='' /></map>"
document.write( bla )

Well I think you get the point.

Check the official specs of HTML 4.01 > Objects, Images, and Applets > Client-side image maps: the MAP and AREA elements, for the possibilities and syntax of image maps.

Hope that helps,

(Edited by poi on 10-02-2005 19:09)

bikepunk
Nervous Wreck (II) Inmate

From:
Insane since: Sep 2005

posted 10-03-2005 19:04

... dear lord.

Thanks so much. I actually went out and bought the CSS Zen Garden book, a month or two ago to try to teach myself how to to just those things.
(easier to modify a small CSS file, than re-do a whole site regularly.) and I was insipred by it to delve into the deep end of HTML and CSS.
The main problem for me now, is weaning my accomplice away flash as a site-building tool, and then, throwing down some basic HTML that is easy to work with.

Thanks again for the tips, and everything.

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: <area> tag and Javascript (Page 1 of 1)

Insert Slimies »

Insert UBB Code »

Topic: <area> tag and Javascript (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=26769" title="Pages that link to Topic: <area> tag and Javascript (Page 1 of 1)" rel="nofollow" >Topic: <area> tag and Javascript <span class="small">(Page 1 of 1)</span>\$