I want to put some dot link on the picture. how? 
Autor: Volkan A.
Visitado 2302,
Seguidores 1,
Compartilhado 0
I want to put some dot link on the picture. how?
Publicado em
Autor
Marked places should open other small pages
Hello Volkan
I have made an example here : http://www.john-schwartz.dk/imagelink.html
The code for it is here :
<img src="http://www.john-schwartz.dk/files/test15.jpg" width="400" height="300" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="240,90,330,110" href="http://www.bramminginfo.dk/vinklub/" target="_blank" alt="Sun">
<area shape="rect" coords="240,170,330,200" href="http://www.brammingegnsmuseum.dk/" target="_blank" alt="Mercury">
<area shape="rect" coords="240,255,330,280" href="http://www.john-schwartz.dk/index.html" alt="Venus">
</map>
The image is test15.jpg. It has 3 hotspots. The hotspot areas is rectangular but it can also be cirkular ( circle )
You can see some explanation here ;´: https://www.w3schools.com/tags/tag_map.asp
I hope this was helpful for you.
Kind regards
John
Hello again Volkan
The code should be put in a html-object.
You probably guessed this - but just to be sure.
The layout for my example page is here :
Again - I hope this helps you.
Kind regards
John S.
Autor
yes But I want these links to be small info pages
You can also assign LINKS (*). In addition to what is already anticipated, ... you can create mapped images directly with OO.o.Draw, or Gimp, or simply and directly online:
http://www.maschek.hu/imagemap/imgmap
https://www.image-maps.com/
The image is attached to the project in the "files" folder ...
The HTML code of the IMG TAG must return the URL "files/nameimage.jpg".
IMG TAG and TAG MAPS must be pasted into the HTML Code Object.
(IT) - Puoi assegnare anche i LINK. Oltre a quanto già anticipato, ... puoi creare immagini mappate direttamente con OO.o.Draw, oppure Gimp, oppure semplicemente e direttamente online:
*** ***
l'immagine va allegata al progetto nella cartella "files"...
il codice HTML del TAG IMG deve riportare l'URL "files/nomeimmagine.jpg".
il TAG IMG ed il TAG MAPS devono essere incollati nell'Oggetto Codice HTML.
... (*) - Linked pages can be pages hidden in the map at step 3.
ciao
.
Hello Volkan
I have made a new example for you here : http://www.john-schwartz.dk/imagelink---copy.html
When you hover the hotspots you can see an info-box. The appearance of the box, you can style yourself.
I have kept the links - if you do not want links, you can remove them.
I hope this is what you mean by small info pages - and I hope it is useful for you.
Kind regards
John S.
Here is the new "code"
<style>
.msgBox{
position:fixed;
min-width:120px;
margin:15% auto auto 45%;
z-index:10;
border-radius:5px;
border:1px solid #F5F5F5;
background-color:#DDD;
box-shadow:1px 1px 5px #999;
overflow:hidden;
display:none}
.msgBox ul, .msgBox li{
list-style:none;
padding:0;
margin:0;
border:0}
.msgBox .title{
border-bottom:#AAA solid 1px;
padding:5px;
background-color:#CCC;
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:12px}
.msgBox .msgContent{
border-top:#F5F5F5 solid 1px;
padding:5px;
font-family:Times, "Times New Roman", serif;
font-size:12px}
</style>
<script>
function display(mb,m,t){
mb.style.display='block';
m.innerHTML = t;
}
function hide(mb){
mb.style.display='none';
}
</script>
</head>
<body>
<div id="msg" class="msgBox">
<ul>
<li class="title">Information</li>
<li id="message" class="msgContent"></li>
</ul>
</div>
<img src="http://www.john-schwartz.dk/files/test15.jpg" width="400" height="300" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="240,90,330,110" href="http://www.bramminginfo.dk/vinklub/" target="_blank" alt="Sun" onmouseover="display(msg,message,'This is a little text to show the hovering function')" onmouseout="hide(msg)">
<area shape="rect" coords="240,170,330,200" href="http://www.brammingegnsmuseum.dk/" target="_blank" alt="Mercury" onmouseover="display(msg,message,'This could be a text to describe the building 2')" onmouseout="hide(msg)">
<area shape="rect" coords="240,255,330,280" href="http://www.john-schwartz.dk/index.html" alt="Venus" onmouseover="display(msg,message,'And this his could be a text to describe the building 3')" onmouseout="hide(msg)">
</map>
</body>
</html>
Hello again Volkan
I have changed a bit here : http://www.john-schwartz.dk/imagelink---copy.html
Now you on the upper link get a pop-up box. I have put an image in the popup - it could as well have been a webpage or whatever.
I have also moved the hover-pop-up.
If it is not the hover-box or the pop-up you mean, then please show what it is/was you mean, by posting the URL to your site when you have it uploaded. I find it interesting to make such things, but I also want to know where I went wrong in the understanding of the "job". I really hope you are helped by this.
Kind regards
John S.
Here you have the changed code for the "new" page :
<style>
.msgBox{
position:fixed;
left:10px;
top:400px;
min-width:120px;
margin:15% auto auto 45%;
z-index:10;
border-radius:5px;
border:1px solid #F5F5F5;
background-color:#FFF;
box-shadow:1px 1px 5px #999;
overflow:hidden;
display:none}
.msgBox ul, .msgBox li{
list-style:none;
padding:0;
margin:0;
border:0}
.msgBox .title{
border-bottom:#AAA solid 1px;
padding:5px;
background-color:#CCC;
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:12px}
.msgBox .msgContent{
border-top:#F5F5F5 solid 1px;
padding:5px;
font-family:Times, "Times New Roman", serif;
font-size:12px}
</style>
<script>
function display(mb,m,t){
mb.style.display='block';
m.innerHTML = t;
}
function hide(mb){
mb.style.display='none';
}
</script>
</head>
<body>
<div id="msg" class="msgBox">
<ul>
<li class="title">Information</li>
<li id="message" class="msgContent"></li>
</ul>
</div>
<img src="http://www.john-schwartz.dk/files/test15.jpg" width="400" height="300" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="240,90,330,110" href="http://www.bramminginfo.dk/vinklub/" target="popup" onclick="window.open('http://www.john-schwartz.dk/files/test15.jpg','popup','width=640,height=500'); return false;" alt="Sun" onmouseover="display(msg,message,'This is a little text to show the hovering function')" onmouseout="hide(msg)">
<area shape="rect" coords="240,170,330,200" href="http://www.brammingegnsmuseum.dk/" target="_blank" alt="Mercury" onmouseover="display(msg,message,'This could be a text to describe the building 2')" onmouseout="hide(msg)">
<area shape="rect" coords="240,255,330,280" href="http://www.john-schwartz.dk/index.html" alt="Venus" onmouseover="display(msg,message,'And this his could be a text to describe the building 3')" onmouseout="hide(msg)">
</map>
</body>
</html>
Hello Volkan
Apparently you don't mind, but I have made an alternative way to present the mapped areas.
In case you or others should be interested, you can find an example here : http://www.energifremtiden.dk/c4d/accordion.html
**** Hover the "read more"'s or click the accordion - and don't mind the text.
Kind regards
John S.