HTML and CSS Issues Revisited

That's great! Is there a way to generate those coordinates easily? How did you do that?

I found this site:
http://www.image-maps.com/map_image.php

Tom, that is a great solution, however, some of these panels will have dynamic data depending on the logged in user, so I need a bit more control than a static image. Some buttons will disappear or appear based on the logged in user.

I'm hoping someone with CSS / HTML forte will be able to tell me how to get everything to line up.

I will award you points for this great solution though.

thanks!

thanks!

Tom,

I think I have talked the powers that be into letting me use your image map style. It will help where we need it to shrink, but it won't allows us to do the dynamic things we want. But they might be willing to sacrifice those.

So, what tool did you use to generate the maps and code? How much was generated and how much did you do manually?

thanks!

It's really just simple math.

Combine all your faded versions of the images into one background image. This is your map.

Start in the upper left corner for image 1 (client.png). If you want the clickable area 5 pixels in from the edge of the div container and 5 pixels down and the image is 200 x 186, then area 1 coords will be 5,5,205,191. The first pair of numbers is the top left corner and the other pair is the bottom right. 200 plus the 5 from the left is 205. 186 plus the 5 from the top is 191. (Notice I got the bottom right corner coordinates wrong for client.png in my sample.)

For image 2 (employee.png), the left coordinate will be the 5 in from the left plus the width of the client.png plus 5 pixels of space (or whatever you want). The top coordinate will be 5, same as client.png. Right will be equal to the left coordinate plus the width of employee.png. Bottom will be 5 from the top plus the height of employee.png.

Just continue this way for each image. You can sketch it out on paper and add in the space sizes and image dimensions to more easily visualize.

I actually used Adobe Fireworks to make it easy for myself to get the coordinates but it can be done with simple math.

What kind of dynamic things do you want to do? The image swap in my sample is a dynamic thing. You could do all sorts of dynamic things with additional jQuery. You could load the images without the text for example and have the text added from an array of choices like I did with the rollover images. You could even have the text animate or change on rollover.

One dynamic thing is on the client panel, they want the client's LOGO to display, and so it needs to be shrinkable too. And we don't have to have to build a map image for every single client with every single logo, so we need to have it overlay that spot and shrink on shrinking.

I'm wondering if I put a panel below it and move it up with a reverse margin, and set it to shrink on page resolution, that it might work. But I have to get the other to work first and then I'll play with it.

They were going to have me put in database loaded data behind the client panel, which shows on hover but if we go this route, they'll pass up on that. They like how it shrinks.

thanks!

They don't have to pass on that or anything else because they went with the image map. The client logo can be added to the image map the same way that the rollover swaps are added and positioned exactly where needed. The image swaps are just separate images that are absolute positioned over the image map and z-indexed so they are on top. The jQuery add-on takes care of the resizing by reading the coordinates from the area tags and computing what the proportional new size should be. It does this whenever the window is loaded or resized. The new coordinates are then simply added directly to the DOM to replace the original. For the image swaps, I'm just tapping into the DOM to read the sizes, whether original or recomputed, so I can make my rollover images the same size and in the same position. The titles on the buttons and href attributes can be dynamic as well. Data from a database could drive what the end user sees by delivering the necessary arrays or JSON objects to the browser.

Do you know if this can be used with an asp.net control?

<asp:ImageMap ID="Shop" runat="server"></asp:ImageMap>

Select allOpen in new window

in the code behind I setup the image url:

      Shop.ImageUrl = "Images/ImageMap.png"
  

Select allOpen in new window

I notice the javascript needs the name of the image as a separate element, so I doubt it:

     $('#adminPnl').rwdImageMaps();

Select allOpen in new window

I'm assuming it only works with html maps and so I'm going in that direction though.

I know you've closed off this question but here is a responsive css/html/js sample
AdminPanelCSS.zip

Regular HTML controls work fine in asp.net pages. If you need to access regular HTML controls from code behind just add the runat="server" and make sure it has an id attribute.

Thanks Tom! And thanks Rob, I'll check it out!

Tom,

I just got everything setup and the image map and hovers work great! However, when I click on the image to go to the href, nothing happens. I added http://www.google.com to one of the elements and even that doesn't work.

I read on a forum that you have to have the map before the <img so I swapped them around and still it does not work.

How do I get the hrefs to work? thanks!

<div id="map">

<map name="adminmap" id="adminmap">
  <area shape="rect" coords="5,5,200,186" href="http://www.google.com" alt="Client">
  <area shape="rect" coords="211,5,417,95" href="/Employee/EmployeeDashboard.aspx" alt="Employee Admin">
  <area shape="rect" coords="211,101,347,191" href="#" alt="Module">
  <area shape="rect" coords="425,5,609,94" href="#" alt="Document Control">
  <area shape="rect" coords="353,101,449,191" href="#" alt="District">
  <area shape="rect" coords="457,101,610,191" href="#" alt="Course">
  <area shape="rect" coords="618,5,708,191" href="#" alt="Purge Training">
</map>

<img id="adminPnl" src="Images/ImageMap.png" width="713" height="196" alt="Admin Panel" usemap="#adminmap">

</div>

Select allOpen in new window

It does not work because the image swap is placing a new image over top of the image map so you're not actually clicking on the map. The simple solution is to make a clickable anchor out of the swapped in image.

Replace this line in the script:

$('#map').append("<a id='newImg' style='top:" + coords[1] + "px;left:" + coords[0] + "px' href='" + $(this).attr('href') + "' ><img width='" + (coords[2] - coords[0]) + "' height='" + (coords[3] - coords[1]) + "' src='Images/" + images[idx] + "' alt='' /></a>");

Select allOpen in new window

that did it! thanks!