I have made a HTML page with an image map over an image.
This image spans over multiple screens and I want to add anchor links to area of the image.
I tried to use something like:
LinkToArea1</br>
and
<area id="Area1" shape=rect coords=X1,Y1,X2,Y2 href="http://www.perdu.com" title="Perdu"/>
under the map tag,
but while using the same id under the img tag works, this won't do for an area.
What are the html or css solutions to manage this, apart of cutting the images in pieces
(this is indeed the evident solution but it is not possible, I have thousands to do and the cutting would have to fit what has already been done with the maps - that are provided to me by a third party)?
Thanks by advance
Related
By the look of the posts here I'm in the deep end with the big boys whereas I need the toddlers paddling pool. So apologies if I'm in the wrong place with my basic problem.
I can't get images to float with LightBox [v. 2.6]
I have a sample problem page here - http://quivis.co.uk/PROBLEMS/lightbox-float/index.html
That page has 2 copies of the same image. Both 'work' in the sense that when you click them LightBox does its brilliant thing and fires up correctly, but both image links display incorrectly.
The top image looks as it should i.e. with mouse-over highlights/border colours etc but will not float right. In some browsers there is also a large redundant area to the left that I am unable to remove.
The bottom image floats as I want it to but in the process the image link styling is lost.
As all things are possible it must be possible to combine the look of 1 with the positioning of 2 but I can't see how to do it!
All the related files are within the 'PROBLEMS' folder. Please let me know if I should paste the html or css here.
Any help much appreciated. Thanks, Duncan
Set float:right style to a tag instead of float:right to images.
And there is mis-spelling of class attribute in second a tag, it is mentioned as 'xclass', correct that spelling too.
I have an image with a "Visit" button on it that is image mapped with HTML code, it has a roll over effect so that when you put your mouse over the "visit" link, it shows a glow version of the visit button.
But right now the code is not correct, the rollover effect replaces the original image with the glow version image, I simply want the glow version to overlay the original version at the same exact coordinates that are in the html code below: coords="52,63,145,100"
I don't want it replace the whole image. And I want the glow version to maintain its normal size. This is the code so far:
<div style="text-align:center; width:200px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201304212133558" src="http://www.image-maps.com/uploaded_files/3201304212133558_example78.png" usemap="#Image-Maps_3201304212133558" border="0" width="200" height="200" alt="" />
<map id="_Image-Maps_3201304212133558" name="Image-Maps_3201304212133558">
<area shape="rect" coords="52,63,145,100" href="yahoo.com" alt="visit!" title="visit!" onMouseOver="if(document.images) document.getElementById('Image-Maps_3201304212133558').src= 'http://s15.postimg.org/a71gazzzr/visit_glow.pngmage-maps.com/';" onMouseOut="if(document.images) document.getElementById('Image-Maps_3201304212133558').src= 'http://www.image-maps.com/uploaded_files/3201304212133558_example78.png';" />
<area shape="rect" coords="198,198,200,200" href="http://www.image-maps.com/index.php?aff=mapped_users_3201304212133558" alt="Image Map" title="Image Map" />
</map>
</div>
Here is a live demo.
You could achieve this what you're looking for by removing this code all together and creating the both the button and the glow-hover effect with CSS.
The issue with your current code is that that method of rollover effect, ie image replacement via mapping, is very cumbersome and out-of-fashion, so to speak.
The web is literally covered in resources in regards to CSS and even HTML, and I would suggest looking into them.
For your query in particular, check this out: http://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/
i am going to do my best here to convince you to rethink what you're doing. I know you want an answer to your question but the truth is, I dont think theres a way to do it. The problem is the original image is one thing and the rollover button is another thing. When this was the norm you had to create the original button and rollover button to be exactly the same size, and dpi in order for it to work and look right. If you wanted to have something in the middle of the image you had to slice out the part you wanted to change and use css and divs or (God Forbid) a table, to make it work.
In the year 2013, you can accomplish everything you're looking to do with CSS3 and NO images at all.
this site will make them for you and just give you the code when you're done.
http://css-tricks.com/examples/ButtonMaker/
this one used images incase you wanted something a little more special than what text can provide,
http://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/
Good luck
EDIT: I am sleepy so when I was telling you what was wrong with your original stuff I dont think I did a good job. The original image is a huge thing with a border and a small button in the middle. The hover button is just the small button. You're thinking you can using a hover effect to replace just the small button in the middle with the overlay image. This might be possible with javascript but I am not really sure you can do this with a hover effect. If this is possible its not a good way to do it.
You're literally replacing the image in the tag, so you're not going ot be able to show two pictures simultaneously unless you load the base image into a separate element.
One option would be to change the : add background-image: url(http://www.image-maps.com/uploaded_files/3201304212133558_example78.png); to the style attribute. (and, for neatness, you could replace the base image in the tag with a transparent png).
This isn't the right approach though, for a number of reasons. Images harm SEO, they are slower to load, some browsers have problems with png transparency, google translate won't translate them, etc, etc, etc.
Besides, you can do all this in css:
http://jsfiddle.net/as2003/AbVTK/
I'm using prettyphoto for the first time, very nice tool. I would like to know if more people have this problem. Its not crucial but I hate to not do things because I dont understand them. This is the code:
<div class="single_left">
<img src="_img/examples/thumb-1_50.jpg" alt="WHATEVER INFO" />
</div>
It works perfectly. But I have a doubt. If you look all the code you will see that its quite simpel. Its a div in which inside there is a <a> and inside there is a <img> thats acts as a thumbnail. As any for any <img> you need to add an alt="" atribute. The idea of this atribute is that if somebody has slow internet or if the image fails to load, a small description would be displayed in a text format, this will be the content of alt="". In this case "WHATEVER INFO" (Check code above). So if the image is displayed this alternative text shoud NOT be displayed.
ok... clear
The issue is that with prettyphoto if the picture is zoomed from a click you can see the alt="" text on top of the frame of prettyphoto. So in this case WHATEVER INFO would be displayed. This is not its purpose and of course breaks any design plan.
Does anybody know why this happens??
Is there a way of solving this so I can put some alternative text??
According to this link, add this CSS code to css/custom.css to do what you want:
div.ppt, .pp_description {
display: none !important;
}
I can let you know that the answer to my question os exactly like this:
div.ppt {
display: none !important;
}
This will make the alt value not displayed.
What I don;t know is if the picture is not loaded if the alt will work as such... At least you know how to take it out.
Greetings!!
I have to generate <map> and <area> elements on a web page containing many images. Each image would have to be linked to its appropriate <map> via usemap="#map1", usemap="#map2", etc...
As a nasty hack for this situation, I'd like to add one 1x1 absolutely positioned (top:0, left:0) <img> (the anchor-image). Then, I'd combine all the <area> tags into one <map> (the super-map), referenced by the anchor-image.
Trying this, the <area> tags defined in the super-map do not activate when I mouseover them (they are outside of the 1x1 anchor-image). I tried making anchor-image width:100%, height:100% and playing with its z-index (I still have to interact with the images on the page for other reasons). Unfortunately, when the z-index makes the <area> elements clickable, it stops me from interacting with the images.
Any ideas on what else I can try? Thanks!
Can you elaborate on why you need so many maps? If you have a lot of images, why not split each one into a single action and simply place them in a tags?
Or, why not combine the images into a larger one and then have fewer maps?
I have the following requirement:
A large image contains several 'hotspots' that need to link to other pages. Sounds simple. I have created a simple html page, a div with the background image and absolute positioned links using CSS with image sprite rollovers.
However, I have now been presented with another image and the hotspots are not square, but irregular shapes. In one example they are similar to surfboards. Any ideas how I can get the links to respond to only the actual bounding box of the image. There are also instances where the 'hotspots' are parallelogram shaped and butted up next to each other.
Creating rectangular images in this instance just doesn't achieve the results required.
I think imagemaps might be a solution, but I want explore all alternatives first.
Hope this makes sense.
HTML image maps are the way to go - they support arbitrary polygons, and are well understood by screen readers and suchlike.
You might be able to do something clever with SVG in modern browsers, but it's not going to work for the IE6 crowd.
The alternative to HTML image maps are Css sprites as described in this a list apart article. Read the section under "irregular shapes".
It takes some work but the final HTML will be semantically more appealing (ie. to search engines) than with the standard image maps.
As suggested by Richie's answer, you can use links in SVG too. The trick is to properly mix SVG with xlink. A quick solution would look like this:
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<a xlink:href="https://stackoverflow.com/">
<polygon points="200,10 250,190 160,210" style="fill:blue;stroke:black;stroke-width:2" />
</a>
</svg>
If you click anywhere on the polygon, you will be directed to the stackoverflow main page. Clicking anywhere else will do nothing.