Jump to content


rollover info boxes. javascript?

Started by aireek, May 09 2006 02:35 PM

8 replies to this topic

#1 aireek

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 09 May 2006 - 02:35 PM

hey everyone

im just trying to figure out how to code something like this:

http://www.mediatemp...t/site/credits/ when u rollover the "artwork info" beside the art, a box appears and follows the mouse a little bit with the info of the artist, etc.

can anyone point me to a good tutorial to do this?

thanks so much

eric B)

#2 Futingkiller

    Young Padawan

  • Members
  • Pip
  • 110 posts

Posted 09 May 2006 - 03:38 PM

http://www.w3schools.com/default.asp
study the events that heppen on mouse move in javascript
the litle box you can pu initialy outside the window and then put it relative to the mouse
if you want i can make you the script for that, tomorow.
i can make a small tutorial also

#3 Futingkiller

    Young Padawan

  • Members
  • Pip
  • 110 posts

Posted 10 May 2006 - 09:47 AM

here is the script:
<html>
<head>
<script type="text/javascript">
var isOn=false;
var mouseX = 0;	//Mouse coords.
var mouseY = 0;
var deviationX=0;   //the div's deviation (you can put here the dimensions of the div with "-" because the O(0,0) is the right top corner   
var deviationY=0;
function StartTheFollow()
{
isOn=true;
}
function StopTheFollow()
{
isOn=false;
document.getElementById('LittleBox').style.left=-1000;
document.getElementById('LittleBox').style.top=-1000;
}
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
(document.layers)?window.onMouseMove=getMousePosition:document.onmousemove=getMousePosition;
function getMousePosition(e) {
	mouseY=(document.all)?window.event.y:e.clientY;
	mouseX=(document.all)?window.event.x:e.clientX;
if(isOn==true)document.getElementById('LittleBox').style.top=mouseY+deviationY;
if(isOn==true)document.getElementById('LittleBox').style.left=mouseX+deviationX;
}
function HideDiv()
{
document.getElementById('LittleBox').style.left=-1000;
document.getElementById('LittleBox').style.top=-1000;
}
</script>
</head>

<body onLoad='HideDiv();'>
<div id='LittleBox' style='position:absolute'>You can indroduce here what you want, from images to tables, to text. Enjoy !</div>
<a onMouseOver='StartTheFollow();' onMouseOut='StopTheFollow();'>This is a Futtingkiller Copyright :)</a>
</body>
</html>
it works now in IE, Mozilla, Opera

Edited by Futingkiller, 10 May 2006 - 11:41 AM.

#4 DanWilliamson

    P2L Jedi

  • Members
  • PipPipPip
  • 650 posts

Posted 10 May 2006 - 10:02 AM

View PostFutingkiller, on May 10 2006, 03:46 PM, said:

here is the script:
<html>
<head>
<script type="text/javascript">
var isOn=false;
var mouseX = 0;	//Mouse coords.
var mouseY = 0;
var deviationX=0;   //the div's deviation (you can put here the dimensions of the div with "-" because the O(0,0) is the right top corner   
var deviationY=0;
function StartTheFollow()
{
isOn=true;
}
function StopTheFollow()
{
isOn=false;
document.getElementById('LittleBox').style.left=-1000;//this value is a security value, not to show the table by accident, so you can put any value there
document.getElementById('LittleBox').style.top=-1000;
}
window.captureEvents(Event.MOUSEMOVE);
(document.layers)?window.onMouseMove=getMousePosition:document.onmousemove=getMousePosition;
function getMousePosition(e) {
	mouseY=e.clientX
	mouseX=e.clientY;
if(isOn==true)document.getElementById('LittleBox').style.left=mouseY+deviationY;
if(isOn==true)document.getElementById('LittleBox').style.top=mouseX+deviationX;
}
function HideDiv()
{
document.getElementById('LittleBox').style.left=-1000;
document.getElementById('LittleBox').style.top=-1000;
}
</script>
</head>

<body onLoad='HideDiv();'>
<div id='LittleBox' style='position:absolute'>You can indroduce here what you want, from images to tables, to text. Enjoy !</div>
<a onMouseOver='StartTheFollow();' onMouseOut='StopTheFollow();'>This is a Futtingkiller Copyright :)</a>
</body>

</html>

Seriously who ever uses that code needs to change it all and validate :D

#5 Futingkiller

    Young Padawan

  • Members
  • Pip
  • 110 posts

Posted 10 May 2006 - 11:23 AM

why?
what's wrong with it?
i just realised that it wasn't working in IE. modifying now.....
i am done :D
i don't realy know how to explain the event thing, because I didn't understand it either (it's a combination of 3-4 scripts)
can any1 tell me what that (document.layers) condition is?
document.all is a way to verify if the browser is IE

Edited by Futingkiller, 10 May 2006 - 11:44 AM.

#6 aireek

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 10 May 2006 - 03:06 PM

:D

thanks a lot man

#7 Aussiestinger

    Young Padawan

  • Members
  • Pip
  • 270 posts

Posted 10 May 2006 - 03:53 PM

I tried that one out and it just flashes heaps and just doesn't seem to work too well =/

#8 jbog91

    Young Padawan

  • Members
  • Pip
  • 89 posts
  • Location:USA
  • Interests:Heh, what isn't?- Computers- Graphics- Networking- Automotive (four wheelers, cars, jetskies, boats, etc)- Soccer- Girls :P- FishingAnd alot more!

Posted 10 May 2006 - 04:14 PM

Everything yall need.

http://www.dynamicdr...ex5/popinfo.htm

All kinda tooltips, fully customizable. Enjoy.

#9 Futingkiller

    Young Padawan

  • Members
  • Pip
  • 110 posts

Posted 11 May 2006 - 06:59 AM

it's onMouseOver script over a text. if you put an image there it will be ok
between the chars there is not text so there the mose is not over the text so the litle writing disapares
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design