Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Setting background image onmouseover/hover.

    I have a container div that has a number of images in it. What I am trying to do is give each image a "wrapper" on a mouseover or hover by setting a background image that will extend beyond the height and width of the images. What I want is for a background image to be set dynamically depending on what image the mouse is over.

    I've read that there might be something I can do with the anchor tag.

    So is there any way that I can set a background image dynamically?
    Last edited by Ax3l; 12-03-2012 at 06:24 PM.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Ax3l,

    no need for javascript, CSS will do the trick.

    Here is a basic example...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <base href="http://www.coothead.co.uk/images/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
     }
    #image0 {
        display:block;
        width:100px;
        height:100px;
        padding:20px;
        margin:auto;
        border:1px solid transparent;
        cursor:pointer;
     }
    #image0:hover {
        border-color:#909;
        background-image:url(anim2.gif);
        background-position:center center;
        box-shadow:4px 4px 4px #999;
     }
    </style>
    
    </head>
    <body>
    
    <div>
     <img id="image0" src="anim1.gif" alt="">
    </div>
    
    </body>
    </html>
    
    coothead

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Very simple, thank you.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts

    No problem, you're very welcome.


    coothead


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •