WebSite X5Help Center

 
Volkan A.
Volkan A.
User

I want to put some dot link on the picture. how?  en

Auteur : Volkan A.
Visité 2765, Followers 1, Partagé 0  

I want to put some dot link on the picture. how?

Posté le
8 RéPONSES
Volkan A.
Volkan A.
User
Auteur

Marked places should open other small pages

Lire plus
Posté le de Volkan A.
John S.
John S.
User

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

Lire plus
Posté le de John S.
John S.
John S.
User

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.

Lire plus
Posté le de John S.
Volkan A.
Volkan A.
User
Auteur

yes But I want these links to be small info pages

Lire plus
Posté le de Volkan A.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
John S.
John S.
User

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>

Lire plus
Posté le de John S.
John S.
John S.
User

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>

Lire plus
Posté le de John S.
John S.
John S.
User

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.

Lire plus
Posté le de John S.