make a visible link with <map>

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
darkwolverine
Forum Newbie
Posts: 4
Joined: Wed Dec 30, 2009 7:55 am

make a visible link with <map>

Post by darkwolverine »

Hello... i am a newbie from asia... and i can not speak english well... and i am sorry for that...so i hope you all.. can understand what i mean...

i have a question.... with <map>, we can make some link with coordinat under the image... but.. that link is invisible (we can not see the link until our mouse come to that link)... and my question is... how to make visible link i mean it can see.. with <map>...

Thanks for your attention.... :D
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: make a visible link with <map>

Post by daedalus__ »

im going to refer you to some articles on css based image maps. im not sure if the map tag is deprecated post html4 but i think it should have been.

http://www.frankmanno.com/ideas/css-imagemap-redux/
http://www.alistapart.com/articles/imagemap/

you'll have more control over the style using css
darkwolverine
Forum Newbie
Posts: 4
Joined: Wed Dec 30, 2009 7:55 am

Re: make a visible link with <map>

Post by darkwolverine »

Thanks for your attention.....
but, i think that is not what i'm looking for....

i just want to make a visible link in <map>..

here is the code :
<map name="1"> <!-------------PULAU SUMATERA----------------------> <area shape="rect" coords="10,24,40,31" href="aceh" class="warna"></area> <area shape="rect" coords="75,40,145,55" href="sumatera_utara"> <area shape="rect" coords="110,75,135,85" href="riau"> <area shape="rect" coords="170,65,225,90" href="kepulauan_riau"> <area shape="rect" coords="30,98,105,110" href="sumatera_barat"> <area shape="rect" coords="125,107,157,117" href="jambi"> <area shape="rect" coords="200,120,235,133" href="bangka"> <area shape="rect" coords="155,136,205,160" href="sumatera_selatan"> <area shape="rect" coords="78,140,125,150" href="bengkulu"> <area shape="rect" coords="120,170,166,180" href="lampung"> </map>
with that code... we can make some link with coordinat position... but the link is invisible(can not see). I just want to make a visible link with <map>. so user can see... where is the link located...

I'am sorry.. i can speak english well..... and by the way... thank you so much for your help... :D
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: make a visible link with <map>

Post by daedalus__ »

you can try to apply css to the area tag. but if that does not work the only way to do it is using the methods detailed in the links i posted.
darkwolverine
Forum Newbie
Posts: 4
Joined: Wed Dec 30, 2009 7:55 am

Re: make a visible link with <map>

Post by darkwolverine »

thanks for your help... i'll try.... and if i have some trouble... i hope you want to help me.... :D
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: make a visible link with <map>

Post by omniuni »

Hey, I ran into this myself, actually. Daedalus is right, it's a CSS image map that you need. You'll need to re-write your code, but once you get it set, it works really well. You can then position labels and links wherever you need them. I actually have an example that you can take a look at but it's not online yet. I'll post a link when it's ready.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: make a visible link with <map>

Post by omniuni »

Hey,

Check out the CSS Image map at: http://jerrysartaramastores.com/

As you can see, the links are just <div> elements positioned, so you can put text, backgrounds, borders, etc. In my case, I used them to display tool-tips and make links.
darkwolverine
Forum Newbie
Posts: 4
Joined: Wed Dec 30, 2009 7:55 am

Re: make a visible link with <map>

Post by darkwolverine »

thanks for your help..... but when i visit your site(http://jerrysartaramastores.com/). the web is under maintenance (This website is undergoing maintinence. We expect to have it completed shortly.). But... thanks for your help..... :D
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: make a visible link with <map>

Post by omniuni »

It is, that message I have posted through the CMS, and the image map should be working just fine. That said, you will notice the links are still using the old design, hence the "under construction" message.
Post Reply