In a small website where the pages are only composed by a single image with multiple links using html map, I want to resize the images (smaller images) but it is extremely painful to resize all the images and change all the link coordinates.
<div style="text-align:center; width:586px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201110040649307" src="http://site.com/ui_prototype/login.png" usemap="#Image-Maps_5201110040649307" border="0" width="586" height="1162" alt="" />
<map id="_Image-Maps_5201110040649307" name="Image-Maps_5201110040649307">
<area shape="rect" coords="59,550,297,614" href="http://site.com/ui_prototype/main_menu.html" alt="" title="" />
</map>
</div>
What is the better solution to solve the problem?
Thanks
You may zoom/scale the div,
example(half size):
style="zoom:.5;-o-transform: scale(.5);-moz-transform: scale(.5)"
Here's a little lib that solves this problem.
https://github.com/davidjbradshaw/imagemap-resizer
I think the best solution would be to resize the images and then write a small script that will allow you to select a rectangle (or simply click 4 times on the image), prompt for entering and URL and then spit out the HTML for that rectangle. This way it would be much faster to generate the map.
If you see yourself doing this again in the future, it would be better to build the map with real links positioned with CSS, but with the top & left coordinates specified as percentages relative to the image. This way you should be imune to size changes (but not to changing the image entirely).
Related
I found this piece of code on stackoverflow that would allow me to place a small image over a larger image (in my case a small lock to indicate the movie is unavailable)
<div style="position:relative;display:inline;">
<img src="_images/test.jpg" width="350" />
<div style="position:absolute;bottom:10px;right:10px;">
<img src="_images/lock.png" width="40">
</div>
</div><h3>Air</h3>
it all displays perfectly, but there is a split second where the AIR tag at the bottom displays first (and sometimes the lock image), before it all snaps into place properly. (The main image, the lock in the bottom corner of the image, then the h3 tagged Air at the bottom.)
Does anyone know the cause of this, and how one might fix it?
Thanks
One alternative is to place the src content in a data uri scheme. This will cause the images to load with the content. When you set src to a uri resource, the browser has to go out and get it. This causes the delay you see.
http://en.wikipedia.org/wiki/Data_URI_scheme
Ok so I need some input on placing textual links to stay static to an image on a page..
The image is basically a cloud, with products branching out with logos and now textual links attached to each product.
what would be best way to go about this?
currently im thinking creating a div, setting the needed width and height.
Then from that. I will have the img positioned absolute within div, as well as the links all absolute positioned in same div...
does this sound about right?
Any other approaches to this?
<div id="subheaderhome">
<p class='hptext' id='wcp'> W</p>
<p class='hptext' id='rp'> R</p>
<p class='hptext' id='mp'> Meo</p>
<img id="shopsol" src="images/solshairpiece.png" />
</div>
Yes that approach will work but if you want the links to be positioned according to the image only,you should use position:relative over position:absolute.
position:absolute removes the element to be positioned from the normal flow of the document and places it in an exact location on the page.Meaning that the links in your case will remain in the same position even if you zoom in or out on your browser while the rest of the page changes in view.This will also make your page look messed up on a screen differently sized than yours.
I imagine you're creating an image with links. Here is another solution thinking out of the box a bit. Incorporate the link wording into the image design itself and use an imagemap to tell the browser what parts of the image are to be treated as clickable links. Then, the position of the links are in fact part of the image itself and you can skip over toying with CSS to get these links to behave properly.
First, you have the image tag. With the usemap attribute that must be '#mapname'. In this code, my map's name is 'home' so my usemap attribute is "#home".
<nav>
<img class="navbar" src="./images/navbar.gif" usemap="#home" alt="Home, Auto Service, Hours & Location, Contact Info, Image Gallery" />
Then, you write your map out in pixel pairs. On my page here, I have one long image of buttons rather than placing an image of the button 5 times, I made one image with 5 copies of my button. Each area tag is covering one rectangular (shape="rect") segment of the image. In the first one here, I am starting in the top left hand corner of the image at "0,0... (x,y). The rectangle's bottom right corner is 186 pixels to the right, and 40 pixels down from that first point, so it is ...186, 40" The href should be self explanatory to mean that those bounds link to it.
<map name="home">
<area shape="rect" coords=" 0, 0, 186, 40" href="index.html" alt="Mortensen Motors Homepage" />
<area shape="rect" coords=" 186, 0, 372, 40" href="auto_service.html" alt="Tullahoma Auto Service" />
<area shape="rect" coords=" 372, 0, 558, 40" href="hours_and_location.html" alt="Located in Tullahoma, Tennessee" />
<area shape="rect" coords=" 588, 0, 744, 40" href="contact_info.html" alt="Contact info" />
<area shape="rect" coords=" 744, 0, 930, 40" href="image_gallery.html" alt="Mortensen Motors image gallery" />
</map>
</nav>
So I used one image, and I made 5 links. This would be perfect for what you're doing because the coords="" attribute is based on the image's pixels by the image file, not by actual display size. Therefore, they do not stray from their intended areas of image coverage based on zooming.
I'm trying to create a simple rollover with an image to show a tip or info box/bubble.
I have a div wrapper holding the image src, and css to style/position the wrapper and child.
I just can't figure out how to make the img src interactive.
Here's the html:
<div class="wrapper">
<img src="images/gallery/wheat3.png" width="250" height="250" data-stellar-ratio="3.5" data-stellar-vertical-offset="200">
</div>
I want to create a rollover with the image "wheat3.png" to show and info box at the side.
Here's the test link as well:
http://hatfielddesign.com/witbier_test/
Thanks.
Viewing the source code of the test link you've shown, seems like they uses Stellar.js to implement this effect. Take a read at the docs, they may help you ;)
Is it possible to create a somewhat irregular shaped button.
My button has the following css which makes it a simple rectangle.
.btnclass {
width:100;
height:40;
}
but it want to make look more like this:
______________________
| ___________|
| |___________
|______________________|
Any clever ideas to accomplish this with CSS?
I don't think you can, your better off using an image that's shaped as you want
Not really without a bunch of CSS hackery, your best bet is to use images.
If your attempting to do so for form buttons look at using the following
<input type="image" src="image_path.png" alt="image description" />
Go with an image button. <input type="image" ... /> or <button><img src="" /></button> If not, the suggestions below aren't optimal but that's because an image is probably the most optimal solution.
Setting a background-image with the desired shape. I think this is the most pure solution so go for this.
background-image: url(whole-image.png);
Setting a background color and a small background-image located at the top right corner. The solution is something similar to the "rounded-corner-hack" out there.
background: #<button-color> url(small-image.png) top right no-repeat;
I have a lightbox that has one image, then some more images in the same set, but these are styled to be hidden, the only way you can see them is by clicking the first image (the only visible one) and activating the lightbox.
Is there a way of skipping straight to the second image in the lightbox instead of the image being clicked on being shown first,
This is what im working on:
http://yvonneestrada.com/taylor/gallery.php?id=5&start=3
Try setting a link on the first image that will link to the second one. It may look something like this:
<img src="1" />
<img src="2" />
<img src="3" />