[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 221
  • Last Modified:

HTML and CSS Issues Revisited

I am trying to reproduce this:

this is what I want.
but instead, I am getting this:

Capture2.PNG
I am attaching my code so you can reproduce locally.

All of my images are the proper width and height to match one another, and I'm pretty sure I have the spans right, but please let me know what I'm messing up.

I am using auto etc. so that when the user shrinks the page the images shrink with it.

This was started here if you want the history:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28496091.html

The top rows I did have working, but then added the bottom rows. I was going to use two tables, but couldn't get my bottom rows to line up, so decided to just use the one table, and they still don't work.

I also want to be able to resize the screen and have the images shrink (as they do) without glomming up the layout.


thanks!
AdminPanel.zip
0
Starr Duskk
Asked:
Starr Duskk
  • 9
  • 5
1 Solution
 
Tom BeckCommented:
Since all of the boxes are images including the text inside, the best approach is a simple image map, some jQuery for the image swap and a jQuery add-on to make the responsiveness part easy.

Here's a working example using some of your images. It responds to changes in screen size and the boxes stay lined up.
ResponsiveImageMap.zip
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
That's great! Is there a way to generate those coordinates easily? How did you do that?
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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!
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
thanks!
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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!
0
 
Tom BeckCommented:
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.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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!
0
 
Tom BeckCommented:
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.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Do you know if this can be used with an asp.net control?

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

Open in new window


in the code behind I setup the image url:
      Shop.ImageUrl = "Images/ImageMap.png"
  

Open in new window


I notice the javascript needs the name of the image as a separate element, so I doubt it:
     $('#adminPnl').rwdImageMaps();

Open in new window


I'm assuming it only works with html maps and so I'm going in that direction though.
0
 
RobOwner (Aidellio)Commented:
I know you've closed off this question but here is a responsive css/html/js sample
AdminPanelCSS.zip
0
 
Tom BeckCommented:
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.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Thanks Tom! And thanks Rob, I'll check it out!
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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>

Open in new window

0
 
Tom BeckCommented:
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>");

Open in new window

0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
that did it! thanks!
0

Featured Post

Nothing ever in the clear!

This technical paper will help you implement VMware’s VM encryption as well as implement Veeam encryption which together will achieve the nothing ever in the clear goal. If a bad guy steals VMs, backups or traffic they get nothing.

  • 9
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now