/    Sign up×
Community /Pin to ProfileBookmark

image mapping, letting something appear below :)

Copy linkTweet thisAlerts:
Oct 16.2005

Hiya…
I have a question :p
I dont’t think it will be easy to solve…
so what i need is an image with 10 different links in it… i believe its called image mapping…
clicking those links should make a different text for each link appear below the image.
I’m sorry if im giving anyone a headache ?
Well, thanks anyways for reading it . hehe
also.. i’m good at html, but my Jscript knowledge is very poor 😮

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@JEffYauthorOct 16.2005 — well, thanks but i don't understand one bit of that ?

i can figure out image mapping because ive done it before... long ago hehe.

but the javascript part..

thanks anyways for wasting your time on a complete stranger ?
Copy linkTweet thisAlerts:
@UltimaterOct 16.2005 — Charles gave you the syntax, here is an example:

http://www.w3schools.com/tags/tag_area.asp

(I found it by doing a search for "AREA tag")

Note: if you are using HTML and not XHTML, change each:
/> into a > in their example.
Copy linkTweet thisAlerts:
@JEffYauthorOct 16.2005 — its still not really what i need im afraid.

i need these links in the image to target to a place below ...

like when you use frames

you can have a link in one frame target to the other frame and show the page there.

what i need is... 10 links in one image targeting an area below the image but without using frames.

Thanks ?
Copy linkTweet thisAlerts:
@CharlesOct 16.2005 — like when you use frames[/QUOTE]It's called an "inline" frame and it is created by both the IFRAME and the OBJECT elements. IFRAME is depricated so you'll need to use it with the transitional DTD but OBJECT is not so well supported (Thanks, Microsoft!).
Copy linkTweet thisAlerts:
@UltimaterOct 16.2005 — Want a lil' JavaScript in there, no problem:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html dir="ltr" lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;title&gt;&lt;/title&gt;
&lt;style type="text/css"&gt;
.hide{display:none;}
.show{display:block;}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function showinfo(p){
var e=document.getElementById("extrainfo");
var els=e.getElementsByTagName("div");
for(var i=0,l=els.length;i&lt;l;i++){if(els[i].className=="show")els[i].className="hide"}
var ne=document.getElementById(p)
if(!ne)return true;
ne.className="show"

}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;Click on one of the planets:&lt;/p&gt;
&lt;p&gt;
&lt;img src ="http://www.w3schools.com/tags/planets.gif"
width ="145" height ="126" alt="Planets" usemap ="#planetmap"&gt;

&lt;map id ="planetmap" name="planetmap"&gt;
&lt;area shape ="rect" coords ="0,0,82,126" href="javascript:void(showinfo('Sun'))" alt="Sun"&gt;
&lt;area shape ="circle" coords ="90,58,3" href="javascript:void(showinfo('Mercury'))" alt="Mercury"&gt;
&lt;area shape ="circle" coords ="124,58,8" href ="javascript:void(showinfo('Venus'))" alt="Venus"&gt;
&lt;/map&gt;
&lt;/p&gt;
&lt;div id="extrainfo"&gt;
&lt;div id="Sun" class="hide"&gt;Sun&lt;br&gt;extra info&lt;/div&gt;
&lt;div id="Mercury" class="hide"&gt;Mercury&lt;br&gt;extra info&lt;/div&gt;
&lt;div id="Venus" class="hide"&gt;Venus&lt;br&gt;extra info&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@JEffYauthorOct 17.2005 — Thanks! that's exactly what i need ?

I should really learn javascript myself... Any one have an idea for a good website to learn it? I'm pretty dumb so it has to be easy to get :o
Copy linkTweet thisAlerts:
@UltimaterOct 17.2005 — Nope, I never came across a good JavaScript book yet -- I only picked up a single one im my life and it's very old and out-of-date. I should really take A1ien51's lead and publish my own JavaScript book.
Copy linkTweet thisAlerts:
@CharlesOct 17.2005 — [i]JavaScript : The Definitive Guide [/i] by Flanagan I think it is.
×

Success!

Help @JEffY spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...