onmouseover

[Fredrikmikael]

hello me and my class are hosting a lan party and i am the web designer for the website.

 

i have made a seatmap with small button-ish seats. like each button is a seat and when you hover over a seat you get a shadow effect.

 

i want to have a box appear when you hover over a seat container seatnumber, steam name, name, age, gender.

but dont really know how to make this.

im assuming i need to use some sort of javascript.

 

any help is appreciated.

Thanks you in advace

 

Edit: to be clear i dont need help making the list/ info inside this box. just the hover box itself.

[Ssoele]

hello me and my class are hosting a lan party and i am the web designer for the website.

 

i have made a seatmap with small button-ish seats. like each button is a seat and when you hover over a seat you get a shadow effect.

 

i want to have a box appear when you hover over a seat container seatnumber, steam name, name, age, gender.

but dont really know how to make this.

im assuming i need to use some sort of javascript.

 

any help is appreciated.

Thanks you in advace

 

Check out jQuery, makes it a lot easier.

jQuery

$('.box').mouseover(function() {	$(this, '.info').show();});$('.box').mouseout(function() {	$(this, '.info').hide();});

HTML

<div class="box">	<div class="info">	</div></div>

This makes the div .info visible if you hover over .box. Then you can do some nice CSS to make it float.

[Fredrikmikael]

Check out jQuery, makes it a lot easier.

 

i have no experience with jQuery, how do i use it to make a hoverbox?

is it kinda like a framework in a way ?

[Ssoele]

i have no experience with jQuery, how do i use it to make a hoverbox?

is it kinda like a framework in a way ?

 

I just added an example in my previous post. You can see it as a sort of framework indeed.

[Fredrikmikael]

I just added an example in my previous post. You can see it as a sort of framework indeed.

 

so this:

$('.box').mouseover(function() {	$(this, '.info').show();});$('.box').mouseout(function() {	$(this, '.info').hide();});

is a own js file to create?

and i just include src= it to the html document

 

<script type="text/javascript" src="/js/hoverbox.js"></script>

?

[Ssoele]

so this:

so this:

$('.box').mouseover(function() {$(this, '.info').show();});$('.box').mouseout(function() {$(this, '.info').hide();});

is a own js file to create?

and i just include src= it to the html document

 

<script type="text/javascript" src="/js/hoverbox.js"></script>

?

$('.box').mouseover(function() {

$(this, '.info').show();

});

$('.box').mouseout(function() {

$(this, '.info').hide();

});

is a own js file to create?

and i just include src= it to the html document

 

<script type="text/javascript" src="/js/hoverbox.js"></script>

?

 

 

Yes, normally you would have this in a separate document, but within your document.ready like this:

$(document).ready(function(){	$('.box').mouseover(function() {		$(this, '.info').show();	});	$('.box').mouseout(function() {		$(this, '.info').hide();	});}

The $(document).ready() makes sure the javascript is only active when the page is fully loaded.

[Nallown]

You could do this in CSS as following

 

In CSS

#seat {display: none; } /* <-- EDIT */#seatNumber:hover + #seat {display: block; }

In HTML

<div id="seatNumber">1337</div><div id="seat">blabla this is the seat</div> 

Which would on #seatNumber hover change the display to block for itself AND #seat.

Otherwise you'd do this in js/jquery as the previous people mentioned

 

Edit:

Forgot to make seat hidden by default

[Fredrikmikael]

ok i have managed to create a hoverbox but its glitchy as fuck if i move my cursor more toward the hoverbox.

is there anyway to make the hoverbox a little more to the right because its right next to the cursor.

and another solution could be to just let it be over the hoverbox like it wont disappear when i am moving my cursor on top of it.

 

http://sjovegan-ikt.no/r/seatmap2.htm

 

here is link to what i have so far.

its the 3 purple seats furthest to the right that i have applied hoverbox on.

[Fredrikmikael]

or is it possible to make the cursor ignore it as it isnt there. when you move your mouse over the hoverbox nothing happens.

 

there is a chrome app called "hoverzoom" that is when you mouse over images a copy of the image pops up in its original size a few pixels to the right of the cursor instead of right next to it (0px)

[Ciccioo]

or is it possible to make the cursor ignore it as it isnt there. when you move your mouse over the hoverbox nothing happens.

 

there is a chrome app called "hoverzoom" that is when you mouse over images a copy of the image pops up in its original size a few pixels to the right of the cursor instead of right next to it (0px)

 

You could do this in CSS as following

 

In CSS

#seatNumber:hover + #seat {display: block; }

In HTML

<div id="seatNumber">1337</div><div id="seat">blabla this is the seat</div> 

Which would on #seatNumber hover change the display to block for itself AND #seat.

Otherwise you'd do this in js/jquery as the previous people mentioned

you should really consider that CSS method

it's simpler, more efficient, better managed by the browser, faster, more beautiful, shorter

 

just notice that the nallown's code is only correct for one seat, for multiple ones you should use a class instead of an id (put a dot instead of the # in CSS, and "class" instead of "id" in HTML)

 

event handling in JS (jQuery makes it even weirder) can give headaches

 

 

edit:

you should also put in the CSS something like

#seat{         display:none;}

so that the div is only displayed because of the mouseover

[Nallown]

you should really consider that CSS method

it's simpler, more efficient, better managed by the browser, faster, more beautiful, shorter

 

just notice that the nallown's code is only correct for one seat, for multiple ones you should use a class instead of an id (put a dot instead of the # in CSS, and "class" instead of "id" in HTML)

 

event handling in JS (jQuery makes it even weirder) can give headaches

 

 

edit:

you should also put in the CSS something like

#seat{         display:none;}

so that the div is only displayed because of the mouseover

woops forgot to make it hidden by default fixed

also if he want's to use #seat-1 #seat-2 #seat-3 etc.... and he wants to apply the same css rule to all of the #seat-xxxxxx then he could use a wildcard

*[id*='seat-']{ display:block; }

this will apply to anything using the id #seat- (plus anything else [e.g. #seat-1, #seat-2])

I know that this isn't what you meant but just another handy dandy thing he maybe could use