3 ms·
Ask HN: Learning Programming - HTML question on Image Maps
I recently started to learn the basics of programming and am currently in the middle of HTML. I was wondering if any of you could help me with my HTML problem -
I'm trying to create an image map where I link the word 'home' within a large banner image to home.htm and also include styling for the word when a mouse is hovered over it.
This is what I came up with so far -
<div>
<img usemap="home" src="images/banner.png"/>
<MAP name="home">
<AREA HREF="home.htm" SHAPE=RECT COORDS="118,410,185,390">
</MAP>
</div>
The image is working perfectly in that the word 'home' within the large banner image is being hyperlinked to home. However, I'm having issues with the styling - I can't get the 'home' link to change color when I mouse over it. I tried using
STYLE="background-color: 222;"
within the map tag but it's not working.
A little help please?
- SwellJoe 17y agoThis is probably not the right place to ask HTML questions. There are forums devoted to web design which would be a better fit.
- mahmud 17y ago1) This is the wrong forum to ask such questions. Go to SitePoint, W3Schools and similar. 2) Use a tool. http://www.maschek.hu/imagemap/imgmap http://www.maschek.hu/imagemap/imgmap
- duskwuff 17y agoThe MAP element isn't displayed. If you want to apply styling to components of the image on hover, you'll need to slice it.
- lhorie 17y agoThe <map> and <area> tags can't be styled. You should either use javascript to replace the src of the image onmouseover of the <area>, or, ideally, switch to a <a> with CSS background-images <div style="background:url(banner.png)"> <a id="homelink" href="" style="position:absolute; top:10px; left:10px; height:100px; width:100px;"></a> </div> And the CSS: <style> #homelink {background:url(homelink.png)} #homelink:hover {background:url(homelink_hover.png)} </style> Hope that makes sense. PS: as other noted, there are other sites more suited to specific coding questions (e.g. stackoverflow.com, experts-exchange.com, etc)