How to use image-map on jssor. its not working, the link disappears. I have tried the given code.
<div id="jssor_4" style="position:relative;margin:0 auto;top:0px;left:0px;width:1500px;height:300px;overflow:hidden;visibility:hidden;">
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1500px;height:300px;overflow:hidden;">
<div>
<img data-u="image" src="/images/banner-animasi1.jpg" usemap="#image-map1" style="width:100%" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb108" style="position:absolute;bottom:0px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:16px;height:16px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5800"></circle>
</svg>
</div>
</div>
</div>
</div>
<map name="image-map1">
<area target="_self" alt="Tentang kami" title="Tentang kami" href="/about" coords="2666,758,3540,922" shape="rect">
</map>
Any suggestion or help will be appreciated. Thanks
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.
I want two 'menus' on my page, but when I add a div next to my leftmenu (where I didn't use div but pictures) I get ugly space between my pictures.
My current code is:
<html>
<head>
<title>Welcome to Nielyboyken</title>
</head>
<body bgcolor="grey">
<br>
<a href="http://zeldauniverse.net">
<img src="http://i1.minus.com/jbg3tjE57KYsx1.png" />
</a>
<a href="">
<img src="http://i.minus.com/ip2vEndNDv7vj.png" />
</a><text-align:"right">
<iframe src="http://free.timeanddate.com/clock/i3qoeq8q/n48/szw135/szh135/hoc000/hbw12/hfc000/cf100/hgr0/hcw1/fas20/facfff/fdi88/mqc0033cd/mqs3/mql5/mqw2/mqd74/mhc0033cd/mhs4/mhl4/mhw2/mhd76/mmcf90/mml4/mmw1/mmd74/hhc666/hmc666" frameborder="0" width="137" height="137"></iframe>
</font>
<div style="width:1340px; height:20px; background-color:black;">
Contact
[Register]
[Login]</font>
</div>
<center>
<font style="font-family: Fixedsys;font-size: 35px;color:blue">Welcome to my personal site!</font>
</center>
<center><font style="font-family:Fixedsys,;color:white">Welcome! Notice that this is not a forum site but just a personal site.</font></center>
<div id="LeftMenu">
<table>
<img src="http://i5.minus.com/iI7VEHhLP3WyV.png" /> <br>
<a target="_blank" href="http://minus.com/lJMgzKG1FFv2v">
<img src="http://i.minus.com/jJMgzKG1FFv2v.png" border="0"/>
</a>
<div style="width:50px; height:50px; color:red;" </div> <br>
<a href="http://zeldauniverse.net">
<img src="http://i.minus.com/ibfBWr7hEsMtsT.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://youtube.com">
<img src="http://i.minus.com/ib0OadHbWfnpew.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://twitter.com">
<img src="http://i.minus.com/iMNcGJ5Bjwvx4.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://facebook.com">
<img src="http://i.minus.com/ibhDDFKmGlL4rk.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<img src="http://i4.minus.com/i6nJ7Pg8kUfqo.png" /> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="page2test.html" >
<img src="http://i.minus.com/iFNcJv4UvSdye.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="aboutzu.html">
<img src="http://i.minus.com/ishbphpEbNRi2.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://twitter.com/nielyboyken">
<img src="http://i.minus.com/ihJnSHKv3vAco.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://www.zeldauniverse.net/forums/members/5390370-nielyboyken.html">
<img src="http://i.minus.com/ibdZgDlK1H5NLP.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="youtube.com/nielyboyken">
<img src="http://i.minus.com/iGZahFuxuc349.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" />
</table>
</div>
</body>
</html>
Does someone know how to fix it?
You should use CSS. HTML is going to leave white space unless you explicitely define where you want them in your DIVs. Much easier to use a CSS template, and format with that. You will have ability to "stick" things in place with CSS.
http://www.w3schools.com/css/
OR
You could use a 1x 2 table. and then insert each element inside the table. Then they would be side by side. Define Column properties, etc...
You should really Google the formatting of this stuff before you ask on here...