PDA

View Full Version : Swap DIV's on mouseover -Example


Judes
03-28-2011, 12:45 PM
Hello Everyone ,

I appreciate the help you offer here , I'm not sure if this is the right place to ask the question ..

But I have a website , it has This Button :mrgreen:
I need to swap a Div when you put the mouse on that button withought clicking


Here's an example website (http://lerecorddumonde.be/) , put your mouse on the "Heart" Image , another Div will appear


The first Div was



<img height="86" width="86" alt="" src="img/heart.png" style="display: block;">

codes

</div>


and when you put the mouse , it changes to



<img height="86" width="86" alt="" src="img/heart.png" style="display: none;">

same codes

</div>



nothing changes but the "none;" and "block;" but same codes and same ID





I have no idea how to change DIVs on mouseover or rollovers

if any one has : ( please help me .. I appreciate it

gentleone
03-28-2011, 01:09 PM
It's done with jQuery.

This is the HTML:

<div id="like">

<img src="img/heart.png" width="86" height="86" alt="" />

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flerecorddumonde.be&amp;layo ut=box_count&amp;show_faces=false&amp;width=55&amp;action=like &amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:65px;" allowTransparency="true"></iframe>

</div>
This is the CSS:

#like {
position: absolute;
top: 225px;
left: 50%;
margin-left: -43px;
width: 86px;
height: 86px;
overflow: hidden;
text-align: center;
}

#like iframe {
margin: 10px auto;
}

#like img {
display: block;
}
And this is the jQuery part in the head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function(){
$('#like').hover(function(){
$('img', this).hide();
}, function(){
$('img', this).show();
});
});
</script>

Judes
03-28-2011, 02:17 PM
Thank you so much , I knew it was a jQuery thingi

but Listen =[

There's something wrong .. , The Image + The Like button are showed

and when I put the mouse in , the image and the Like button disappears and another like button on the left shows

how can I hide the Like button when the Image is showing :(

I copied your links without any change , only the facebook's link to my page . the CSS and the jQuery.. where did I go wrong ?

gentleone
03-28-2011, 02:48 PM
Is it possible for you to put your page online somewhere? It's difficult for me to debug without seeing what you have so far.

Judes
03-28-2011, 04:30 PM
Can I Send it yo you ? in A ZIP or something ?

Judes
03-28-2011, 04:41 PM
I Also have the Like Button away from the picture , I've been trying to fix it , but no solutions , I need it just like the example website (http://lerecorddumonde.be/): (

Sorry , I'm still a newbie

Judes
03-28-2011, 04:55 PM
here it is

here (http://www.zshare.net/download/88351476a22e4e89/)

gentleone
03-28-2011, 05:02 PM
here it is

here (http://www.zshare.net/download/88351476a22e4e89/)
Okay... I will have a look!

gentleone
03-28-2011, 06:12 PM
You didn't copy the CSS for the #like div. If you do that you will see that the like button will go behind the heart image.

Judes
03-28-2011, 08:35 PM
no I copied it , copied the code in here , and paste it to the CSS style sheet

but still didn't work =\


There is a Like button behind the heart !!
but there's also another one before the rollover ?


if it worked with you , can you please modify it for me :(

gentleone
03-28-2011, 08:43 PM
No, it was not in style.css you've send me. You can copy the CSS below and replace it with your style.css (I've included the css properties for the #like div)




body {background:url(images/bg.jpg)
}

#outer
{position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;}

#inner
{margin-left: -250px;
position: absolute;
top: -150px;
left: 50%;
width: 700px;
height: 300px}



.bgtext
{font-size: 150px;
position:absolute;
top:50px;
left:-110px;
right:-80px}

.bgtext, .footertext
{color:#222;
font-family:impact, helvetica, sans serif;}

.footertext {font-size:12px;
position:absolute;
top:320px;
text-align:center;
width:500px;}



div#text1, div#text2, div#text3, div#text4, div#text5, div#text6, div#text7
{color:#222222;
font-family:Georgia, helvetica, sans serif;
position:absolute;}

div#text1 {font-size:29px;
top:6px;
left:0px;}

div#text2 {font-size:60px;
top:46px;
left:20px;}

div#text3 {font-size:35px;
top:60px;
left:300px;}

div#text4 {font-size:50px;
top:200px;
left:45px;}

div#text5 {font-size:39px;
top:200px;
left:260px;}

div#text6 {font-size:45px;
top:-5px;
left:200px;}

div#text7 {font-size:28px;
top:254px;
left:330px;}


#like {
position: absolute;
top: 225px;
left: 50%;
margin-left: -43px;
width: 86px;
height: 86px;
overflow: hidden;
text-align: center;
}

#like iframe {
margin: 10px auto;
}

#like img {
display: block;
}


div#text1 a:hover span {top: -3px;
left: 0px;
width:}

div#text2 a:hover span {top: -10px;
left: 0px;
width:}

div#text3 a:hover span {top: -4px;
left: 0px;
width:}

div#text4 a:hover span {top: -6px;
left: 0px;
width:}

div#text5 a:hover span {top: -6px;
left: 0px;
width:}

div#text6 a:hover span {top: -4px;
left: 0px;
width:}

div#text7 a:hover span {top: -4px;
left: 0px;
width:}

div#inner a:hover, div#inner2 a:hover
{background: none;
cursor:crosshair;}

div#inner a span {display: none;}

div#inner a:visited span {display:none;}

div#inner a {text-decoration: none;
color:white;}

div#inner a:hover span {display: block;
position:relative;
background:none;
font-size:14px}

div#inner a:link, div#inner a:visited {text-decoration:none;}

div#inner a:hover {text-decoration:none}



div#content {position:absolute;
top:-50px;
left:-70px;
width:635px;
height: 400px;
overflow: auto;
font-family: verdana, helvetica, sans serif;
font-size: 13px;
color:white;
text-align:justify;
margin:3px;}

div#inner div#content a:hover {text-decoration:underline;}



div#close, div#top
{width:17px;
height:17px;
background:none;
text-align:center;
font-family:verdana, helvetica, sans serif;
font-weight:bold;
font-size:12px;
border: 1px solid #222}

div#top {position:relative;
left:573px;
top:319px}

div#close {position:relative;
left:573px;
top:-47px;}

div#inner div#close a:link, div#inner div#top a:link {color:#fff; cursor:default;}
div#inner div#close a:visited, div#inner div#top a:visited {color:#fff; cursor:default;}
div#inner div#close a:hover, div#inner div#top a:hover {color:#fff; cursor:default;}



div#urltext {font-family:verdana, helvetica, sans serif;
font-size:30px;
position:absolute;
top:-87px;
left:-69px}



div#urltext, div#inner div#content a:link span
{color:#f142ad}
div#inner div#content a:visited span
{color:#448ccb}
div#inner a:hover, div#inner a:hover span
{color:#db0373}

div#content div#titlebar {border: 1px solid #222222;
background: #000;
font-weight: normal;
color: #ff7c11;}

div#content {margin-left:0;
padding-right:8px;}



.titleblock {font-family:verdana, helvetica, sans serif;
font-size:12px;
color:#ff7c11;
font-weight:;
margin-right:6px;
margin-top:10px;
margin-bottom:10px;
margin-left:2px;
border:1px solid #222;
padding:4px}

.titleblock span {color:#ff7c11}

#urltext a:link {color:#444}
#urltext a:visited {color:#444}
#urltext a:hover {color:#444}
#urltext a:active {color:#444}

Judes
03-28-2011, 08:47 PM
Also , the heart is not moving with me :(
Its very close to the "Stuff" Link

=[

Judes
03-28-2011, 08:53 PM
Oh , Thanks a Lot ,

It worked Now =D

you're a genius , Thaaaaaaaaaaaaaaaaaanks