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.
Mousehover map
Moderator: Crew
- Chroelle
- Admin emeritus
- Posts: 9870
- Joined: Fri Feb 17, 2006 9:19
- Location: Location, location...
- Contact:
Mousehover 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
(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
Re: Mousehover map
I guess this needs to be done in Flash(*)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.
(*) 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!
- Chroelle
- Admin emeritus
- Posts: 9870
- Joined: Fri Feb 17, 2006 9:19
- Location: Location, location...
- Contact:
Re: Mousehover map
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.
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
(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
- Railwaymodeler
- Legend
- Posts: 892
- Joined: Fri Mar 24, 2006 16:06
- Location: North of Hell, err, Illinois
- Contact:
Re: Mousehover map
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.
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.
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.
- Chroelle
- Admin emeritus
- Posts: 9870
- Joined: Fri Feb 17, 2006 9:19
- Location: Location, location...
- Contact:
Re: Mousehover map
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
(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
- Railwaymodeler
- Legend
- Posts: 892
- Joined: Fri Mar 24, 2006 16:06
- Location: North of Hell, err, Illinois
- Contact:
Re: Mousehover map
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.
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.
- Chroelle
- Admin emeritus
- Posts: 9870
- Joined: Fri Feb 17, 2006 9:19
- Location: Location, location...
- Contact:
Re: Mousehover map
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.
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
(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
- Chroelle
- Admin emeritus
- Posts: 9870
- Joined: Fri Feb 17, 2006 9:19
- Location: Location, location...
- Contact:
Re: Mousehover map
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.
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
(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
- Railwaymodeler
- Legend
- Posts: 892
- Joined: Fri Mar 24, 2006 16:06
- Location: North of Hell, err, Illinois
- Contact:
Re: Mousehover map
Right where you see this part:
Wit an image, it should look more like this:
You should now see a man screaming at his laptop with this image.
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>
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>
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.
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.
- Chroelle
- Admin emeritus
- Posts: 9870
- Joined: Fri Feb 17, 2006 9:19
- Location: Location, location...
- Contact:
Re: Mousehover map
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.
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
(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
- Railwaymodeler
- Legend
- Posts: 892
- Joined: Fri Mar 24, 2006 16:06
- Location: North of Hell, err, Illinois
- Contact:
Re: Mousehover map
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:
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.
In my last post, see where it says:
Code: Select all
<img src=http://www.computersystemrebuild.com/images/breakdown.jpg>
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.
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.
- Chroelle
- Admin emeritus
- Posts: 9870
- Joined: Fri Feb 17, 2006 9:19
- Location: Location, location...
- Contact:
Re: Mousehover map
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
(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
- Chroelle
- Admin emeritus
- Posts: 9870
- Joined: Fri Feb 17, 2006 9:19
- Location: Location, location...
- Contact:
Re: Mousehover map
And my first question is:
What is wrong with this code? It produces this: http://www.connect-webdesign.dk/Referen ... /Vumir.htm
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"> </td>
<td height="93" width="2444"> </td>
<td height="93" width="1987"> </td>
<td height="93" width="2357">
<p align="center"> </td>
</tr>
<tr>
<td height="107" width="1069"> </td>
<td height="107" width="1006"> </td>
<td height="107" width="1746"> </td>
<td height="107" width="2444"> </td>
<td height="107" width="1987"> </td>
<td height="107" width="2357"> </td>
</tr>
<tr>
<td height="156" width="1069"> </td>
<td height="156" width="1006"> </td>
<td height="156" width="1746"> </td>
<td height="156" width="2444"> </td>
<td height="156" width="1987"> </td>
<td height="156" width="2357"> </td>
</tr>
<tr>
<td height="116" width="1069"> </td>
<td height="116" width="1006"> </td>
<td height="116" width="1746"> </td>
<td height="116" width="2444"> </td>
<td height="116" width="1987"> </td>
<td height="116" width="2357"> </td>
</tr>
<tr>
<td height="159" width="1069"> </td>
<td height="159" width="1006"> </td>
<td height="159" width="1746"> </td>
<td height="159" width="2444"> </td>
<td height="159" width="1987"> </td>
<td height="159" width="2357"> </td>
</tr>
<tr>
<td height="99" width="1069"> </td>
<td height="99" width="1006"> </td>
<td height="99" width="1746"> </td>
<td height="99" width="2444"> </td>
<td height="99" width="1987"> </td>
<td height="99" width="2357"> </td>
</tr>
<tr>
<td height="126" width="1069"> </td>
<td height="126" width="1006"> </td>
<td height="126" width="1746"> </td>
<td height="126" width="2444"> </td>
<td height="126" width="1987"> </td>
<td height="126" width="2357"> </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
(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
- Railwaymodeler
- Legend
- Posts: 892
- Joined: Fri Mar 24, 2006 16:06
- Location: North of Hell, err, Illinois
- Contact:
Re: Mousehover map
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.
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.
- Chroelle
- Admin emeritus
- Posts: 9870
- Joined: Fri Feb 17, 2006 9:19
- Location: Location, location...
- Contact:
Re: Mousehover map
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.
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
(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