Curly's World of Freeware Forums

Quality discussion about quality freeware games

Skip to content


Mousehover map

Ever had your computer crash on you, or a website show wrong, or your printer go dead on you? Sure you have... Don't lie.
This is where you ask for help on such a matter. There are propably one of our members who tried the same thing, and know the solution...

Moderators: Chroelle, CREW

Post a reply

Mousehover map

Postby Chroelle » Tue Jul 20, 2010 6:47 pm

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.05 (With added wife)
(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
God
 
Posts: 8347
Joined: Fri Feb 17, 2006 8:19 am
Location: On a brand new phpbb3 board
Top

Re: Mousehover map

Postby Zyx » Wed Jul 21, 2010 5:39 pm

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
Zyx
Shop keeper
 
Posts: 857
Joined: Wed Mar 29, 2006 6:48 pm
Location: Helsinki
Top

Re: Mousehover map

Postby Chroelle » Thu Jul 22, 2010 8:03 am

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.05 (With added wife)
(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
God
 
Posts: 8347
Joined: Fri Feb 17, 2006 8:19 am
Location: On a brand new phpbb3 board
Top

Re: Mousehover map

Postby Railwaymodeler » Thu Jul 22, 2010 10:32 pm

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

My computer sales site- www.computersystemrebuild.com
User avatar
Railwaymodeler
Street merchant
 
Posts: 569
Joined: Fri Mar 24, 2006 3:06 pm
Location: Waukegan, IL
Top

Re: Mousehover map

Postby Chroelle » Fri Jul 23, 2010 8:33 am

I am hereby letting you know! :)
Currently testing Life version 2.05 (With added wife)
(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
God
 
Posts: 8347
Joined: Fri Feb 17, 2006 8:19 am
Location: On a brand new phpbb3 board
Top

Re: Mousehover map

Postby Railwaymodeler » Fri Jul 23, 2010 5:01 pm

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

My computer sales site- www.computersystemrebuild.com
User avatar
Railwaymodeler
Street merchant
 
Posts: 569
Joined: Fri Mar 24, 2006 3:06 pm
Location: Waukegan, IL
Top

Re: Mousehover map

Postby Chroelle » Sat Jul 24, 2010 8:06 am

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.05 (With added wife)
(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
God
 
Posts: 8347
Joined: Fri Feb 17, 2006 8:19 am
Location: On a brand new phpbb3 board
Top

Re: Mousehover map

Postby Chroelle » Mon Jul 26, 2010 1:51 pm

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.05 (With added wife)
(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
God
 
Posts: 8347
Joined: Fri Feb 17, 2006 8:19 am
Location: On a brand new phpbb3 board
Top

Re: Mousehover map

Postby Railwaymodeler » Tue Jul 27, 2010 12:11 am

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

My computer sales site- www.computersystemrebuild.com
User avatar
Railwaymodeler
Street merchant
 
Posts: 569
Joined: Fri Mar 24, 2006 3:06 pm
Location: Waukegan, IL
Top

Re: Mousehover map

Postby Chroelle » Tue Jul 27, 2010 3:53 pm

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.05 (With added wife)
(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
God
 
Posts: 8347
Joined: Fri Feb 17, 2006 8:19 am
Location: On a brand new phpbb3 board
Top

Re: Mousehover map

Postby Railwaymodeler » Tue Jul 27, 2010 5:03 pm

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

My computer sales site- www.computersystemrebuild.com
User avatar
Railwaymodeler
Street merchant
 
Posts: 569
Joined: Fri Mar 24, 2006 3:06 pm
Location: Waukegan, IL
Top

Re: Mousehover map

Postby Chroelle » Tue Jul 27, 2010 9:29 pm

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.05 (With added wife)
(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
God
 
Posts: 8347
Joined: Fri Feb 17, 2006 8:19 am
Location: On a brand new phpbb3 board
Top

Re: Mousehover map

Postby Chroelle » Mon Aug 09, 2010 7:34 pm

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.05 (With added wife)
(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
God
 
Posts: 8347
Joined: Fri Feb 17, 2006 8:19 am
Location: On a brand new phpbb3 board
Top

Re: Mousehover map

Postby Railwaymodeler » Tue Aug 10, 2010 3:58 am

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

My computer sales site- www.computersystemrebuild.com
User avatar
Railwaymodeler
Street merchant
 
Posts: 569
Joined: Fri Mar 24, 2006 3:06 pm
Location: Waukegan, IL
Top

Re: Mousehover map

Postby Chroelle » Tue Aug 10, 2010 6:09 pm

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.05 (With added wife)
(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
God
 
Posts: 8347
Joined: Fri Feb 17, 2006 8:19 am
Location: On a brand new phpbb3 board
Top
Post a reply

Return to Tech help

Who is online

Users browsing this forum: No registered users and 1 guest

  • eXTReMe Tracker

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
cron