CODEWITHSUNDEEP
javascriptjquerycssimagemap
squids
squids

Reputation: 37

image map alternative (maybe in javascript?)

Alright, so I was wondering if there was an alternative, lightweight way to creating an image map.

Basically, I want to take this image:

And have the sections of the diagram light up when they are hovered over, kinda like this (I've mocked it up in photoshop):

The other sections (which I haven't named yet) should be able to do the same. Also, I'd like to be able to use javascript later to have sliding links appear from behind those sections (I roughly know how to do that now, so I'm okay that)

Does anyone have any suggestions? Just a general direction on what to search for would be great.

Upvotes: 2

Views: 425

Answers (4)

Arkana
Arkana

Reputation: 2889

It's difficult for me to achieve that white shape in the middle, but here's a simple try:

http://jsfiddle.net/w8zTz/

Only with three div and a few css:

HTML

<div class="rojo"></div>
<div class="azul"></div>
<div class="amar"></div>

CSS

div {width:100px; height:100px; border-radius:100px; position:absolute; opacity:0.5;}
.rojo {background:red; top:0; left:30px;}
.azul {background:cornflowerblue; top:60px; left:0;}
.amar {background:gold; top:60px; left:70px;}
div:hover {opacity:1; z-index:-1}

(Z-index is for stack the div behind the other and reach transparency).

Hope this helps :)

Upvotes: 1

EdenSource
EdenSource

Reputation: 3387

Circles are easy to do with CSS. You can start with something like this :

width: 140px;
height: 140px;
background: rgba(255, 0, 0, 0.3);
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;

FIDDLE

Hope it help.

Upvotes: 2

Tanveer Shaikh
Tanveer Shaikh

Reputation: 1688

Map tag would be good and it is not actually heavyweight as it does not require any external plug-ins. However, since you just want a general idea: Once due to some error, I wasn't able to use map tag. So I split the original image into different images (positioned them as the original image was) and then used events on separate parts. Tiresome, but a workaround.

Upvotes: 3

Pbk1303
Pbk1303

Reputation: 3802

Take two images 1)normal image 2)the particular section higligthed when hovered image

<img id="originalimage" src="originalimage.png" width="140" height="140" border="0" usemap="#Map" />   

<map name="Map" id="Map">      
  <area shape="rect" coords="77,18,127,90" href="#" onmouseover="onHover('higlightedimageonhover-imagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/>

</map>



<script>


function onHover6(image1)
{
document.getElementById('originalimage').src=image1;
} 
function onout6(image2)
{ 
document.getElementById('originalimage').src=image2; 
} 
</script>

Here when you hover on the co-ordinates, the image changes to hoverimages and on mouseout it changes to original image.

Upvotes: 0

Related Questions