Mousehover map

Had your computer crash on you, or a website shows wrong, or your printer went dead on you? Come on in...

Moderator: Crew

Post Reply
User avatar
Chroelle
Admin emeritus
Posts: 9870
Joined: Fri Feb 17, 2006 9:19
Location: Location, location...
Contact:

Mousehover map

Post by Chroelle »

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. :)
Currently testing Life version 2.9 (With added second child)
(Beta testing in progress)

www.paed-it.dk - My blog in Danish

Clothes make the man. Naked people have little or no influence on society.
--Mark Twain
User avatar
Zyx
Pretender to the throne
Posts: 1907
Joined: Wed Mar 29, 2006 20:48
Location: Helsinki
Contact:

Re: Mousehover map

Post by Zyx »

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.
Do you has what it takes to join the Homestarmy? The guts? The determination? The five bucks? Join today!
User avatar
Chroelle
Admin emeritus
Posts: 9870
Joined: Fri Feb 17, 2006 9:19
Location: Location, location...
Contact:

Re: Mousehover map

Post by Chroelle »

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. :)
Currently testing Life version 2.9 (With added second child)
(Beta testing in progress)

www.paed-it.dk - My blog in Danish

Clothes make the man. Naked people have little or no influence on society.
--Mark Twain
User avatar
Railwaymodeler
Legend
Posts: 892
Joined: Fri Mar 24, 2006 16:06
Location: North of Hell, err, Illinois
Contact:

Re: Mousehover map

Post by Railwaymodeler »

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.
Without trains America Stops- Support Amtrak

Old trains never die. They just sit in ruin and wait until the day they are taken in by a skilled craftsman and rebuilt to their former glory.
User avatar
Chroelle
Admin emeritus
Posts: 9870
Joined: Fri Feb 17, 2006 9:19
Location: Location, location...
Contact:

Re: Mousehover map

Post by Chroelle »

I am hereby letting you know! :)
Currently testing Life version 2.9 (With added second child)
(Beta testing in progress)

www.paed-it.dk - My blog in Danish

Clothes make the man. Naked people have little or no influence on society.
--Mark Twain
User avatar
Railwaymodeler
Legend
Posts: 892
Joined: Fri Mar 24, 2006 16:06
Location: North of Hell, err, Illinois
Contact:

Re: Mousehover map

Post by Railwaymodeler »

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>
Without trains America Stops- Support Amtrak

Old trains never die. They just sit in ruin and wait until the day they are taken in by a skilled craftsman and rebuilt to their former glory.
User avatar
Chroelle
Admin emeritus
Posts: 9870
Joined: Fri Feb 17, 2006 9:19
Location: Location, location...
Contact:

Re: Mousehover map

Post by Chroelle »

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.
Currently testing Life version 2.9 (With added second child)
(Beta testing in progress)

www.paed-it.dk - My blog in Danish

Clothes make the man. Naked people have little or no influence on society.
--Mark Twain
User avatar
Chroelle
Admin emeritus
Posts: 9870
Joined: Fri Feb 17, 2006 9:19
Location: Location, location...
Contact:

Re: Mousehover map

Post by Chroelle »

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.
Currently testing Life version 2.9 (With added second child)
(Beta testing in progress)

www.paed-it.dk - My blog in Danish

Clothes make the man. Naked people have little or no influence on society.
--Mark Twain
User avatar
Railwaymodeler
Legend
Posts: 892
Joined: Fri Mar 24, 2006 16:06
Location: North of Hell, err, Illinois
Contact:

Re: Mousehover map

Post by Railwaymodeler »

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.
Without trains America Stops- Support Amtrak

Old trains never die. They just sit in ruin and wait until the day they are taken in by a skilled craftsman and rebuilt to their former glory.
User avatar
Chroelle
Admin emeritus
Posts: 9870
Joined: Fri Feb 17, 2006 9:19
Location: Location, location...
Contact:

Re: Mousehover map

Post by Chroelle »

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.
Currently testing Life version 2.9 (With added second child)
(Beta testing in progress)

www.paed-it.dk - My blog in Danish

Clothes make the man. Naked people have little or no influence on society.
--Mark Twain
User avatar
Railwaymodeler
Legend
Posts: 892
Joined: Fri Mar 24, 2006 16:06
Location: North of Hell, err, Illinois
Contact:

Re: Mousehover map

Post by Railwaymodeler »

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.
Without trains America Stops- Support Amtrak

Old trains never die. They just sit in ruin and wait until the day they are taken in by a skilled craftsman and rebuilt to their former glory.
User avatar
Chroelle
Admin emeritus
Posts: 9870
Joined: Fri Feb 17, 2006 9:19
Location: Location, location...
Contact:

Re: Mousehover map

Post by Chroelle »

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.
Currently testing Life version 2.9 (With added second child)
(Beta testing in progress)

www.paed-it.dk - My blog in Danish

Clothes make the man. Naked people have little or no influence on society.
--Mark Twain
User avatar
Chroelle
Admin emeritus
Posts: 9870
Joined: Fri Feb 17, 2006 9:19
Location: Location, location...
Contact:

Re: Mousehover map

Post by Chroelle »

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>
Currently testing Life version 2.9 (With added second child)
(Beta testing in progress)

www.paed-it.dk - My blog in Danish

Clothes make the man. Naked people have little or no influence on society.
--Mark Twain
User avatar
Railwaymodeler
Legend
Posts: 892
Joined: Fri Mar 24, 2006 16:06
Location: North of Hell, err, Illinois
Contact:

Re: Mousehover map

Post by Railwaymodeler »

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>
Without trains America Stops- Support Amtrak

Old trains never die. They just sit in ruin and wait until the day they are taken in by a skilled craftsman and rebuilt to their former glory.
User avatar
Chroelle
Admin emeritus
Posts: 9870
Joined: Fri Feb 17, 2006 9:19
Location: Location, location...
Contact:

Re: Mousehover map

Post by Chroelle »

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.
Currently testing Life version 2.9 (With added second child)
(Beta testing in progress)

www.paed-it.dk - My blog in Danish

Clothes make the man. Naked people have little or no influence on society.
--Mark Twain
Post Reply