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: &amp;lt;area&amp;gt; tag and Javascript (Page 1 of 1)" rel="nofollow" >Topic: &lt;area&gt; tag and Javascript <span class="small">(Page 1 of 1)</span>\
 
bikepunk
Obsessive-Compulsive (I) Inmate

From:
Insane since: Sep 2005

 posted 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 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 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 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 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 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:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu