Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Junior Member
    Join Date
    Oct 2010
    Posts
    17
    Member #
    24485
    is it possible to have an image that would change the background of a div tag on mouseover or do things like make another image appear, or even zoom part of a page?

    Thanks

  2.  

  3. #2
    Junior Member
    Join Date
    Oct 2010
    Posts
    26
    Member #
    24200
    Liked
    1 times
    Yes this is possible.

    You will have to look voor "CSS hover" on Google.
    To zoom a part of a page you will also need some jQuery script or something similar.

  4. #3
    Member JayWood's Avatar
    Join Date
    Oct 2010
    Location
    East Coast U.S.
    Posts
    55
    Member #
    24240
    Here ya go:

    HTML Code:
    <style>
    div{
         background-image: url(path/to/image.jpg);
    }
    div:hover{
         background-image: url(path/to/new/image.jpg);
    }
    </style>
    I would use a selector instead of a div, but depends on your setup there... The hover attribute is called a pseudo-class, more info on those.
    Don't forget to Rep people if they've helped you, it's just the right thing to do.
    My Site - JJ's Webs
    My oDesk Profile - Hire me on oDesk
    My Themeforest Profile - Just for you TF people!

  5. #4
    Junior Member
    Join Date
    Oct 2010
    Posts
    17
    Member #
    24485
    Quote Originally Posted by JayWood View Post
    Here ya go:

    HTML Code:
    <style>
    div{
         background-image: url(path/to/image.jpg);
    }
    div:hover{
         background-image: url(path/to/new/image.jpg);
    }
    </style>
    I would use a selector instead of a div, but depends on your setup there... The hover attribute is called a pseudo-class, more info on those.
    Can't quite make it work Jay.

    Could you show a complete example?

    Thanks

  6. #5
    Member JayWood's Avatar
    Join Date
    Oct 2010
    Location
    East Coast U.S.
    Posts
    55
    Member #
    24240
    Here's an example for ya. I apologize for the lack of asthetics, but it's a simple example Bachground Image Change on Hover

    The code is below:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bachground Image Change on Hover</title>
    <style>
    	body{
    		background-color: #000;
    		color: #CCC;
    	}
    	div{
    		background: url(images/bgimgTest.jpg) center no-repeat;
    		width: 128px;
    		height: 128px;
    		margin: 0px auto;
    	}
    	div:hover{
    		background:url(images/bgimgTest2.jpg) center no-repeat;
    	}
    </style>
    </head>
    <body>
         <div>&nbsp;</div>
    </body>
    </html>
    Notice I used the background property short code, or short hand, I forget. Anyhow, instead of seeing it all bunched up you can do this:
    HTML Code:
    background-image: url(images/bgimgTest.jpg);
    background-position: center;
    background-repeat: no-repeat;
    For the DIV in the HTML body, I just added a non-breaking space. Since we're using a background image, you can add other content, but for the sake of brevity, I chose not to.
    Don't forget to Rep people if they've helped you, it's just the right thing to do.
    My Site - JJ's Webs
    My oDesk Profile - Hire me on oDesk
    My Themeforest Profile - Just for you TF people!

  7. #6
    Junior Member
    Join Date
    Oct 2010
    Posts
    17
    Member #
    24485
    Hi again Jay and I appreciate your help.

    I understand the rollover type of effect but I don't think I've explained myself properly:

    What I'm trying to do is, for instance, have two different Divs (one in the left(1) corner and one in the right(2)).
    I then want the mouseover of Div1 to affect the content of Div2 etc.
    I kind off want elements to be linked.



    Another example is:

    To have the mouseover of an element to control the background wallpaper of the <body>

    That type of thing.

    Appreciate it.

  8. #7
    Member JayWood's Avatar
    Join Date
    Oct 2010
    Location
    East Coast U.S.
    Posts
    55
    Member #
    24240
    Ah okay, a little bit of jQuery magic would do what you wish. Unfortuantely I know of no internal css or html setups that would achieve this without jQuery. Here's a jQuery Example though I can't test it until I get home, and please understand, I'm not a javascript ninja

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bachground Image Change on Hover</title>
    <style>
    	body{
    		background-color: #000;
    		color: #CCC;
    	}
    	div{
    		background: url(images/bgimgTest.jpg) center no-repeat;
    		width: 128px;
    		height: 128px;
    		margin: 0px 30px;
    	}
                 #div2{
                             background: url(images/bgImgTest2.jpg) center no-repeat;
                             width: 128px;
                             height: 128px;
                             margin: 0 30px;
                 }
    	.newImg{
    		background:url(images/bgimgTest3.jpg) center no-repeat;
    	}
    
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
    <script type="text/javascript">
    $("#div1").hover(function(){
         $("#div2").toggleClass("newImg");
    });
    </script>
    </head>
    <body>
         <div id="div1">&nbsp;</div>
         <div id="div2">&nbsp;</div>
    </body>
    </html>
    If I'm right, which I hope I am, when you hover over the left most div, the right div will envoke the .newImg class, which in turn removes the background image. That's if I got the heirarchy right. Like I said though, I'm not a jQuery ninja, and can't check the code until I get home

    Creds:
    jQuery .hover() Event
    jQuery .toggleClass() event
    Don't forget to Rep people if they've helped you, it's just the right thing to do.
    My Site - JJ's Webs
    My oDesk Profile - Hire me on oDesk
    My Themeforest Profile - Just for you TF people!

  9. #8
    Junior Member
    Join Date
    Oct 2010
    Posts
    26
    Member #
    24200
    Liked
    1 times
    I got this working, it doesn't involve ANY Javascript. Only HTML and CSS:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    	#parent{
    		width:20px;
    		height:20px;
    		background: #39f;
    		float:left;
    	}
    	#hover{
    		position: absolute;
    		left:50px;
    		width:20px;
    		height:20px;
    		background: #06c;
    		float:right;
    	}
    	#parent:hover #hover{
    		background: #f00;
    	}
    </style>
    </head>
    
    <body>
        <div id="parent">
            <div id="hover">
            </div>
        </div>
    </body>
    </html>

  10. #9
    Junior Member
    Join Date
    Oct 2010
    Posts
    17
    Member #
    24485
    Quote Originally Posted by OrangeDevDesign View Post
    I got this working, it doesn't involve ANY Javascript. Only HTML and CSS:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    	#parent{
    		width:20px;
    		height:20px;
    		background: #39f;
    		float:left;
    	}
    	#hover{
    		position: absolute;
    		left:50px;
    		width:20px;
    		height:20px;
    		background: #06c;
    		float:right;
    	}
    	#parent:hover #hover{
    		background: #f00;
    	}
    </style>
    </head>
    
    <body>
        <div id="parent">
            <div id="hover">
            </div>
        </div>
    </body>
    </html>
    That's really close to what I want Orange. Is it possible to have the hover box not change its colour when the mouse hovers over it. In effect I would only like the parent box to activate the command.

    Further to this is it possible to have the hover command change a tag, such as <body> .This is a javascript example:

    CodeBelly.com - JavaScript - Background Image-Change from Link


    Thanks for help.

  11. #10
    Junior Member
    Join Date
    Oct 2010
    Posts
    26
    Member #
    24200
    Liked
    1 times
    Of course, here ya go:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    	#parent{
    		width:20px;
    		height:20px;
    		background: #39f;
    		float:left;
    	}
    	#hover{
    		position: absolute;
    		left:50px;
    		width:20px;
    		height:20px;
    		background: #06c;
    		float:right;
    	}
    	#parent:hover #hover{
    		background: #f00;
    	}
    	#parent:hover #hover:hover{
    		background: #06c;
    	}
    </style>
    </head>
    
    <body>
        <div id="parent">
            <div id="hover">
            </div>
        </div>
    </body>
    </html>


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:45 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com