.net technique jquery
/jQuery/createan /jQuery /create an imagemapeffect
Take advantage of HTML’s map and area elements to create an image map that highlights parts of a photo and overlays information about them. Ryan Taylorr explains how Knowledge needed Photoshop, HTML, CSS, jQuery Requires jQuery and a decent photo Project time 30-45 mins Recently, I came across an effect at markboultondesign.com/about-us that sent my mind racing with possibilities, and I was surprised I’d not discovered it sooner. It’s achieved using the map and area HTML elements to create an image map. So how does it work? I’m glad you asked. The basic idea for this effect is to take an image (in this case, a photo of the Eden Project in Cornwall) and apply hover areas to various parts of the image to highlight them and also reveal information about them. For example, when you hover over The Gardens, they become highlighted in colour and more details about them appear over the top of the image. I recommend you take a look at the tutorial files I’ve included on this issue’s CD so that you get a feel for what exactly we’re trying to achieve. So where do these map and area elements come in? Let me show you! This is all the HTML we’re going to use to achieve this effect: <section id="image-map"> <img usemap="#areas" src="assets/images/eden.jpg" alt="Eden Project" width="800" height="536" /> <map id="areas" name="areas"> <area shape="poly" coords="110, 220, 170, 200, 250, 200, 320, 170, 360, 170, 450, 200, 300, 280, 280, 280, 110, 230, 110, 220" href="details.html" alt="Mediterranean Biome" id="tropics"></area> <area shape="poly" coords="310, 300, 500, 200, 600, 200, 720, 275, 800, 275, 800, 310, 750, 310, 650, 400, 310, 360, 310, 300" href="details.html" alt="Rainforest Biome" id="temperate"></area>
Information overlay The finished effect will draw attention to the area that is
hovered on by highlighting it in colour. Additional information is displayed alongside
88
.net october 2010
<area shape="poly" coords="0, 270, 70, 270, 130, 330, 0, 330, 0, 270" href="details.html" alt="The Stage" id="stage"></area> <area shape="poly" coords="670, 405, 800, 350, 800, 536, 575, 536, 575, 500, 670, 450, 670, 405" href="details.html" alt="The Core" id="core"></area> <area shape="poly" coords="0, 240, 60, 240, 250, 300, 250, 380, 650, 450, 650, 490, 560, 505, 560, 536, 0, 536, 0, 346, 140, 346, 140, 320, 100, 280, 70, 260, 0, 260, 0, 240" href="details.html" alt="The Gardens" id="gardens"></area> </map> </section> Let’s go through it. We have an image for the base (black and white) Eden Project photo, which needs an important attribute, usemap. This attribute associates the image to the map element, which has a name value of areas (incidentally, if you add an optional id to a map element as I’ve done here, the id needs to be the same as the mandatory name value). The map element is simply a container for its child area elements, which is where things get interesting.
Area elements
For this tutorial, we have five area elements. These elements represent hyperlinks corresponding to an area of our image (Temperate Biome, Tropics Biome, The Gardens, The Core and The Stage), which is why each one has a href attribute set. What’s interesting about area elements is they can be different shapes – circle, polygon or rectangle. This is where the coords attribute comes in. (I know what you’re thinking: that’s a lot of coordinates! I admit, I got carried away. What can I say: when was the last time you used an hyperlink that wasn’t square? I rest my case.) The coordinates work in pairs. So take, for example, the first area in the list (the one with the id of tropics; see screengrab below). Relative from the top, left corner of the image (0px x-axis/0px y-axis) the first point on the polygon is positioned 110px x-axis by 220px y-axis; the next 170px x-axis by 200px y-axis
Add co-ordinates I recommend you use Firebug and its ilk to add coordinates within the browser so you can see the polygon being drawn.