Mousehover map

Post by **Chroelle** » Tue Jul 20, 2010 20:47

I was wondering if anybody knew about making pictures mousehover sensitive in areas, and display small windows with text or smaller images when hovered over.
I got a request from a guy at work, who wants to do some roleplay-games with the kids in the institutions nearby. For this he needs a map (which he has already drawn) to be mousesensitive in certai areas, so music or speech is played and some text is displayed whenever you hover the mouse or click the mouse on certain areas. Any ideas as to how to do this? And can I make a simple red dot that does the job when clicked?
If anyone has any sites or just ideas (or feedback about what would be cool to add) then please let me know.

Post by **Zyx** » Wed Jul 21, 2010 19:39

Chroelle wrote:I was wondering if anybody knew about making pictures mousehover sensitive in areas, and display small windows with text or smaller images when hovered over.
I got a request from a guy at work, who wants to do some roleplay-games with the kids in the institutions nearby. For this he needs a map (which he has already drawn) to be mousesensitive in certai areas, so music or speech is played and some text is displayed whenever you hover the mouse or click the mouse on certain areas. Any ideas as to how to do this? And can I make a simple red dot that does the job when clicked?
If anyone has any sites or just ideas (or feedback about what would be cool to add) then please let me know.

I guess this needs to be done in Flash(*)

(*) Not necessarily, though. You can also the the map, split it into smaller images and assign some javascript-events to different tiles. However, this is rather difficult and cumbersome approach.

Post by **Chroelle** » Thu Jul 22, 2010 10:03

The *-part was a bit weird because it seems you left out the most important word.

I will try to do it in pure HTML with links for starter, and then I can go and play some more with it later on. Dont know a word of Flash, so I might be pretty screwed there.

Railwaymodeler · Post by **Railwaymodeler** » Fri Jul 23, 2010 0:32

You mean something like how I did component images on, say for example, this page: http://computersystemrebuild.com/cpu.htm on my website?

Hover over the part name and you will see a thumbnail. I suppose one could break up an image to have some parts of it do just like that.

If you need the code for that, let me know.

Post by **Chroelle** » Fri Jul 23, 2010 10:33

I am hereby letting you know!

Railwaymodeler · Post by **Railwaymodeler** » Fri Jul 23, 2010 19:01

As it will not allow me to upload either a txt file of the code (Upload was rejected because the uploaded file was identified as a possible attack vector)

, and because I cannot upload HTML files, I offer the code below here:

Code: Select all

<html>
<head>
<script type="text/javascript">
<!--

var Obj;
function ToolTip(obj,con,x,y){
Obj=document.getElementById('Pop');
Obj.innerHTML=con;
Obj.style.left=(zxcPos(obj)[0]+x)+'px';
Obj.style.top=(zxcPos(obj)[1]+y)+'px';
Obj.style.visibility='visible';
}

function Hide(){
Obj.style.visibility='hidden';
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
  zxcpar=zxcobj.offsetParent;
  zxclft+=zxcpar.offsetLeft;
  zxctop+=zxcpar.offsetTop;
  zxcobj=zxcpar;
}
return [zxclft,zxctop];
}


//-->
</script>
</head>
<body>

<div onmouseout="Hide();" onmouseover="ToolTip(this,'<p>Text pops out; replace with an img</p>',-10,20)" >Something will try to pop out here</div>

<div id="Pop" style="position:absolute;" ></div>
</body>
</html>

Post by **Chroelle** » Sat Jul 24, 2010 10:06

Thanks alot Raillo.

I might need some hints as to making it work, but I will try to play around with it myself first. Sure looks promising.

Post by **Chroelle** » Mon Jul 26, 2010 15:51

I have tried out some stuff, but I need to know the code for adding an image in this script. I am not at all at home with javascript.

Other than that it seems simple - just have to lock down the position of the code so I can assign it to specific points on the map without having to create new points that would mess with the look and feel of the map.

Railwaymodeler · Post by **Railwaymodeler** » Tue Jul 27, 2010 2:11

Right where you see this part:

Code: Select all

<div onmouseout="Hide();" onmouseover="ToolTip(this,'<p>Text pops out; replace with an img</p>',-10,20)" >Something will try to pop out here</div>

Wit an image, it should look more like this:

Code: Select all

<div onmouseout="Hide();" onmouseover="ToolTip(this,'<img src=http://www.computersystemrebuild.com/images/breakdown.jpg>',-10,20)" >S370 Pentium 3 600 MHz SL3VH</div>

You should now see a man screaming at his laptop with this image.

Post by **Chroelle** » Tue Jul 27, 2010 17:53

And if I wanted to create a popup of say - a texted window with an image in it, would I be able to do that? And perhaps even something that could activate a soundsequence?

Like when I move over a point on the map a somewhat small pop-up appears, that has some text in it, and a picture (could of course be created by making the whole thing one picture - text and all), and a small playbutton that will start a soundsequence reading the text out loud.

Railwaymodeler · Post by **Railwaymodeler** » Tue Jul 27, 2010 19:03

While I have not tried to do a sound play button, it should be possible. Text and image should both be possible.

In my last post, see where it says:

Code: Select all

<img src=http://www.computersystemrebuild.com/images/breakdown.jpg>

Between those carats, is what will display when you hover the mouse. It can be text, image, and it should be possible to code through HTML, a sound to play at load of the popup window. At least, I cannot fathom a reason why that would not work.

Post by **Chroelle** » Tue Jul 27, 2010 23:29

Hmmmm...Ok something for me to apply myself too. Thanks a lot Raillo. This is really giving me some opportunities to do some cool stuff.

Will propably return with more questions.

Post by **Chroelle** » Mon Aug 09, 2010 21:34

And my first question is:
What is wrong with this code? It produces this: http://www.connect-webdesign.dk/Referen ... /Vumir.htm

Code: Select all

<body>

<div align="center">
  <center>
  <table border="0" cellspacing="0" width="1110" height="19" background="images/skovlandet-Vumir.jpg" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0">
    <tr>
      <td height="93" width="2075" colspan="2">
      <html>
<body>


<div onmouseout="Hide();" onmouseover="ToolTip(this,'<img src=http://www.connect-webdesign.dk/Referencer/KongCarlsHus.png>',-10,20)" >
  Kong Carls hus</div>
<div id="Pop" style="position:absolute;" ></div>
</body>
</html></td>
      <td height="93" width="1746">&nbsp;</td>
      <td height="93" width="2444">&nbsp;</td>
      <td height="93" width="1987">&nbsp;</td>
      <td height="93" width="2357">
      <p align="center">&nbsp;</td>
    </tr>
    <tr>
      <td height="107" width="1069">&nbsp;</td>
      <td height="107" width="1006">&nbsp;</td>
      <td height="107" width="1746">&nbsp;</td>
      <td height="107" width="2444">&nbsp;</td>
      <td height="107" width="1987">&nbsp;</td>
      <td height="107" width="2357">&nbsp;</td>
    </tr>
    <tr>
      <td height="156" width="1069">&nbsp;</td>
      <td height="156" width="1006">&nbsp;</td>
      <td height="156" width="1746">&nbsp;</td>
      <td height="156" width="2444">&nbsp;</td>
      <td height="156" width="1987">&nbsp;</td>
      <td height="156" width="2357">&nbsp;</td>
    </tr>
    <tr>
      <td height="116" width="1069">&nbsp;</td>
      <td height="116" width="1006">&nbsp;</td>
      <td height="116" width="1746">&nbsp;</td>
      <td height="116" width="2444">&nbsp;</td>
      <td height="116" width="1987">&nbsp;</td>
      <td height="116" width="2357">&nbsp;</td>
    </tr>
    <tr>
      <td height="159" width="1069">&nbsp;</td>
      <td height="159" width="1006">&nbsp;</td>
      <td height="159" width="1746">&nbsp;</td>
      <td height="159" width="2444">&nbsp;</td>
      <td height="159" width="1987">&nbsp;</td>
      <td height="159" width="2357">&nbsp;</td>
    </tr>
    <tr>
      <td height="99" width="1069">&nbsp;</td>
      <td height="99" width="1006">&nbsp;</td>
      <td height="99" width="1746">&nbsp;</td>
      <td height="99" width="2444">&nbsp;</td>
      <td height="99" width="1987">&nbsp;</td>
      <td height="99" width="2357">&nbsp;</td>
    </tr>
    <tr>
      <td height="126" width="1069">&nbsp;</td>
      <td height="126" width="1006">&nbsp;</td>
      <td height="126" width="1746">&nbsp;</td>
      <td height="126" width="2444">&nbsp;</td>
      <td height="126" width="1987">&nbsp;</td>
      <td height="126" width="2357">&nbsp;</td>
    </tr>
  </table>
  </center>
</div>

</body>

</html>

Railwaymodeler · Post by **Railwaymodeler** » Tue Aug 10, 2010 5:58

Add the following to the top of the HTML document, above the <body> tag:

Code: Select all

<html>
<head>
<script type="text/javascript">
<!--

var Obj;
function ToolTip(obj,con,x,y){
Obj=document.getElementById('Pop');
Obj.innerHTML=con;
Obj.style.left=(zxcPos(obj)[0]+x)+'px';
Obj.style.top=(zxcPos(obj)[1]+y)+'px';
Obj.style.visibility='visible';
}

function Hide(){
Obj.style.visibility='hidden';
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
  zxcpar=zxcobj.offsetParent;
  zxclft+=zxcpar.offsetLeft;
  zxctop+=zxcpar.offsetTop;
  zxcobj=zxcpar;
}
return [zxclft,zxctop];
}


//-->
</script>
</head>

Post by **Chroelle** » Tue Aug 10, 2010 20:09

Oh sorry, I didn't add the header, because I do alot of my coding in Frontpage to cut some shortcuts. I am going to replace Frontpage soon though with a more updated program.

Could there be an issue with the new pic being a .png and not a .jpg?

Oh and can you help me with adding musicfiles, and perhaps making it fetch a text-file (preferably .doc or .odd (open Office file format))? I would be really grateful. Even more so if you could tell me how you do, and why you do...oh and where you do. I would love to learn this but I am very visual. My life is a bit of a mess at the moment so trying to think straight without seeing is really hard.

Curly's World

Mousehover map

Mousehover map

Re: Mousehover map

Re: Mousehover map

Re: Mousehover map

Re: Mousehover map

Re: Mousehover map

Re: Mousehover map

Re: Mousehover map

Re: Mousehover map

Re: Mousehover map

Re: Mousehover map

Re: Mousehover map

Re: Mousehover map

Re: Mousehover map

Re: Mousehover map