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've created an imagemap using this generator: http://imagemap-generator.dariodomi.de/
...but the links on each of the icons don't work. Ive no idea why. You can see the map on the homepage of this unfinished site:
http://staging.pixiechildcare.co.uk/index.php
<img src="img/map-lg.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area id="tree" class="shape" alt="dfgdf" title="dfgdgf" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="89,47,146,43,189,73,205,121,165,149,114,143,95,106" />
<area id="cloud" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="610,41,654,62,665,104,648,146,614,175,558,127,565,64" />
<area id="splat" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="915,175,958,202,969,229,958,261,913,305,861,244,873,191" />
<area id="ladybird" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="1120,110,1160,130,1172,156,1167,188,1116,241,1066,192,1073,129" />
<area id="ball" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="1128,359,1169,377,1182,414,1174,442,1127,488,1083,453,1078,380" />
<area id="music" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="730,362,772,378,786,411,779,445,738,491,681,433,683,390" />
<area id="umbrella" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="519,228,549,237,572,275,568,314,519,363,465,308,480,248" />
<area id="train" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="308,284,344,308,358,347,353,375,306,426,258,370,270,305" />
</map>
in your 'custom.js', you are explicitly preventing any action when clicking on an element that has class shape:
$(".shape").click(function(){
event.preventDefault();
});
remove that and it should work...
On my site some of my products picture are not shown.
When i right click to inspect element and click my pictures url there is written
410 GONE
When i refresh the site image is shown.
I have lots of products so pictures too on my site and thats a big problem for me.
Thanks for helping.
<div class="productGallery"> <img id="product" width="450" height="405" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_1b.jpg" data-zoom-image="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_1b.jpg" />
<c:if test="${prdDemo != ''}"><a onclick="OpenTv();" class="watch"></a></c:if>
<div id="productGallery">
<img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_1b.jpg" width="70" height="70" />
<img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_2b.jpg" width="70" height="70" />
<img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_3b.jpg" width="70" height="70" />
<a href="#" data-image="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_4b.jpg" data-zoom-image="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_4b.jpg"> <img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_4b.jpg" width="70" height="70" />
<a onclick="OpenTv();" class="tv_icon"></a></a>
</div>
</div>
Can any one tell me where the error is in this html coding?
https://newmedia.leeds.ac.uk/ug10/cs10jy/portfolio/studenthands/imagemap.html
I have wrote this code but I cant seem to see where i'm going wrong after looking online and following tutorials...
<img src ="images/socialnetwork.png"
width="220" border="0"
usemap ="#socialmap" />
<map id ="socialmap"
name="socialmap">
<area shape ="poly" coords ="77,83,163,127"
href ="https://www.facebook.com/StudentHands" target="_blank" />
<area shape ="poly" coords ="1,105,75,153"
href ="https://twitter.com/StudentHands" target="_blank" />
</map>
Any help would be very much appreciated!
Change the id attribute of map tag with name attribute, it will work
<area shape ="poly" coords ="77,83,163,127"
href ="https://www.facebook.com/StudentHands" target="_blank" />
the coordinates doesnt form a polygon it can just make a line.
the coords are taken as "x1,y1,x2,y2,......xn,yn" where n>=3
Remove the linebreaks and the spaces between attribute and = in the code for the map. That should help.
try this
<img src="images/socialnetwork.png" width="220" border="0" usemap="#socialmap" />
<map id="socialmap" name="socialmap">
<area shape ="poly" coords ="77,83,163,127" href ="https://www.facebook.com/StudentHands" target="_blank" />
<area shape ="poly" coords ="1,105,75,153" href ="https://twitter.com/StudentHands" target="_blank" />
</map>
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]">