I have the following image and i want to add a link on the basket icon. How is that possible?
Thanks for your answers. Now i have two ways to do this or with html:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p style="font-weight:normal;text-transform:uppercase;color:#FFD700;background-color:#000000;border: 5px ridge #ababab;letter-spacing:4pt;word-spacing:-3pt;font-size:42px;text-align:center;font-family:georgia, serif;line-height:4;margin:0px;padding:0px;width:100%;height:183px;">New Online Shop <i class="fa fa-shopping-cart " aria-hidden="true"></i>
</p>
Or with #blue answer using html shape attribute on the image:
<img src='https://i.stack.imgur.com/5I8q6.jpg' width='500' height='150' usemap='#basket' />
<map name='basket'>
<area shape='rect' coords='440 50 500 100' href='www.your_link.com' alt='basket_icon' />
</map>
<p>Click on the basket</p>
Try to use map and area to select specific areas on an image
The HTML
<img src='https://i.stack.imgur.com/5I8q6.jpg' width='500' height='150' usemap='#basket' />
<map name='basket'>
<area shape='rect' coords='440 50 500 100' href='www.your_link.com' alt='basket_icon' />
</map>
<p>Click on the basket</p>
I hope this helps!
I need some help with tooltips and image map..
I want to be able to make "hotspots" on a image when hovering those "hotspots" it will show a tooltip with information..
My code:
<p><img src="../Plan_edited.png" width="2192" height="1520" usemap="#Map">
<map name="Map">
<area shape="rect" coords="335,585,480,679" href="#">
<area shape="rect" coords="483,586,621,679" href="#">
<area shape="rect" coords="210,733,337,831" href="#">
<area shape="rect" coords="340,734,452,831" href="#">
<area shape="rect" coords="455,733,569,830" href="#">
</map>
</p>
I want the tooltip displayed above the "hotspot" and custom styled like this:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tooltip_css&stacked=h
Can any one show me, how this is done with maps? All my attempts have failed and can't find clear instructions on how to do this.
Thank you.
I need help with an image map! It seems they are not compatible with IE10. Although I have one on another site have made that works. But does anyone have any idea why this is not working? It was working then all the sudden after an update...stopped. Does anyone have any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<img alt="" src="http:///www.elysiawright.com/asset/mapjennifer.png" width="665" height="413" usemap="#Map" style="border-width: 0px;border-style: solid;" />
<map name="Map" id="Map">
<area shape="poly" coords="516,147,522,142,524,145,575,137,581,143,579,153,585,161,577,167,575,171,520,183,515,147" href="http://www.allnaturalbeelievers.com/Pennsylvania.html" />
<area shape="poly" coords="502,208,505,196,508,201,513,185,520,181,520,169,522,183,535,180,536,188,544,181,552,178,556,185,549,185,544,198,540,200,535,200,531,213,527,219,513,224,501,209" href="http://www.allnaturalbeelievers.com/WestVirginia.html" />
<area shape="poly" coords="468,159,474,199,475,199,491,204,501,204,520,182,516,148,501,159,484,156,466,159" href="http://www.allnaturalbeelievers.com/Ohio_2.html" />
<area shape="rect" coords="388,4,608,67" href="http://www.allnaturalbeelievers.com/distributorsignup.html" />
<area shape="poly" coords="555,402,564,389,565,378,565,373,534,318,459,325,457,331,476,331,485,341,497,334,516,342,524,366,557,403" href="http://www.allnaturalbeelievers.com/Florida.html" />
<area shape="poly" coords="472,199" href="#" />
<area shape="poly" coords="435,222,459,217,471,203,466,157,436,162,433,220" href="http://www.allnaturalbeelievers.com/Indiana.html" />
<area shape="poly" coords="496,230,582,220,576,210,573,201,564,189,560,186,557,184,549,184,548,198,538,200,530,218,513,226,506,223,495,228" href="http://www.allnaturalbeelievers.com/Virginia.html" target="#" />
</map>
</body>
</html>
Remove the third slash in the image URL and it works fine for me in IE10.
Demo: http://jsfiddle.net/xeG7d/1/
BAD
<img alt="" src="http:///www.elysiawright.com/asset/mapjennifer.png" width="665" height="413" usemap="#Map" style="border-width: 0px;border-style: solid;" />
GOOD
<img alt="" src="http://www.elysiawright.com/asset/mapjennifer.png" width="665" height="413" usemap="#Map" style="border-width: 0px;border-style: solid;" />
The W3 Validator catches this error, and is a valuable debugging tool for situations like this. However, I'll admit that despite the error I didn't catch the malformed URL right away.
Is there a way to add additional photos per set? I can’t see the previous and next buttons once i click on one single image from the gallery images. Does anyone know the code i need to activate this? The gallery was built using Pretty Photo lightbox plugin. I appreciate your time in advance. thanks
example of site: http://www.diligentworks.com/FOA/index1.htm
this actually reads like this:
PHOTO GALLERY
<div class="tabcontent">
<div class="gallery"> <img src="./img/tgallery-item-01.jpg" width="150" height="120" alt="gallery-item-01" />
<img src="./img/tgallery-item-02.jpg" width="150" height="120" alt="gallery-item-01" />
<img src="./img/tgallery-item-03.jpg" width="150" height="120" alt="gallery-item-01" />
<img src="./img/tgallery-item-04.jpg" width="150" height="120" alt="gallery-item-01" />
<img src="./img/tgallery-item-05.jpg" width="150" height="120" alt="gallery-item-01" />
<img src="./img/tgallery-item-06.jpg" width="150" height="120" alt="gallery-item-01" />
</div>
From http://forums.no-margin-for-errors.com/discussion/comment/2958/#Comment_2958:
To use the gallery functionality, you
need to add the gallery name in
braket. Like so:
<a href="" rel="prettyPhoto[gallery]">