News

Create rollover effects using image maps

Planet Propaganda is a design and advertising agency and as such needs a strong web presence to show off their skills in the digital arena.Check their attention-grabbing rollover effects

17

Planet Propaganda is a design and advertising agency and as such needs a strong web presence to show off their skills in the digital arena. On the homepage, there is a fullscreen background image slider as found on a great many sites – but the part that grabs the users attention is the large cross in the middle of the screen.

This splits the page into four triangular sections, which relate to the how Planet Propaganda works. Each of these elements around the cross is a rollover, which is quite unusual as images can’t be triangular. It turns out they are transparent PNGs that are using an image map as the rollover trigger.

TECHNIQUE – The rollover effect

Style the document
The main rollover effect on the homepage is accomplished by using an image map. In the document, add a link to the jQuery library in the head of the document and add the style for the background and container. Inside the container we’ll position the images.

Style the rollover
We’re creating two styles for rollover and rollout. They’re positioned directly over one another but the rollover opacity is set at 0. This enables us to fade it in and fade out the other content with jQuery later. The image map we create needs to be the topmost element, so its z-index is set higher than the others.

001 #top-out{
002 background-image: url(img/top-   out.png);
003 }
004 #top-over{
005         top: -676px; opacity: 0;006         background-image: url(img/top-    over.png);
007 }
008 #imgMap{
009         position: relative;
010         z-index: 200;    
011     }
012 </style>    013     

Page content
Now move to the main body tag of the page and add in the following code for the page structure. Here we add an image inside the <div> ‘imgMap’, which has an image map attached – see the ‘usemap’, we’ll add it in the next step. Then we have two empty <div> tags to hold the rollover and rollout images.

001 <div>
002         <div id="imgMap">
003         <img src="img/cross.png"     alt="image-map"  usemap="#map">
004     </div>
005 <div id="top-out"></    div>
006 <div id="top-over"></   div>

Add the image map
Now we add the image map. To get these co-ordinates, we just used Dreamweaver and in the Properties panel, after selecting an image, a Polygon tool is available to draw the triangle shape. Notice the JavaScript ‘onMouseOver’ and ‘onMouseOut’ calls.

JavaScript code
Now at the bottom of the page we add the following JavaScript. The first function fades in the rollover and the second fades it back out. This is scalable so you can build as many as you like and it will work, as the id is passed in dynamically in the previous step. Save and test it in the browser.

001 <script>
002 function change(block)
003         $('#' + block + '-over').    animate({"opacity": "1"}, "slow");
004         $('#' + block + '-out').        animate({"opacity": "0"}, "slow");
005 }
006 function changeb(block){
007         $('#' + block + '-over').    animate({"opacity": "0"}, "slow");    animate({"opacity": "1"}, "slow");
008         $('#' + block + '-out').        animate({"opacity": "1"}, "slow");
009 }
010 </script>

TECHNIQUE – Create the cross

The rollovers on the homepage are created with image maps and a ton of transparent PNG images layered up on the screen. Here we show how to create the same look, using Photoshop to create the graphics.

Start the cross
The cross can easily be drawn by using the Vector Line tool in Photoshop. Once one line is created, copy the layer and flip it vertically in order to get the cross nice and even. Save this as a PNG.

Add the icon
Duplicate the cross and crop it so that only the top half is showing. Add your icon to this document and align the icon to the cross image. Turn off the visibility of the cross image and save the icon as a PNG.

Create the rollover
Turn off the visibility of the icon and turn the cross layer back on. Use this as a guide to select a triangle shape in the upper section with the Polygon Selection tool. Fill this with a gradient and add text. Turn off the cross layer and save the image as a PNG.

×