Skip to main content
P
photosplus1
Participating Frequently
February 15, 2012
Question

ENLARGE IMAGE ON MOUSEOVER

  • February 15, 2012
  • 2 replies
  • 36370 views

I am using dreamweaver cs5.5.

I am totally stuck. Been searching internet for a week with no success.

My problem seems simple...all I want to do is setup a rollover where when

the mouse rolls over the original image, it produces a different and larger image.

There is no need for a hyperlink.

I am familiar with rollover links etc but these only return an image of the same

size as the original.

Any assistance would be wildly appreciated.

Regards,

Robert

    This topic has been closed for replies.

    2 replies

    M
    megasena
    New Participant
    January 3, 2013

    buddy to untangle your life is the best thing you do this in Fireworks PNG and export in HTML format and insert in dreamwever. Recalling that the button you have to use the F8 option to create and edit button the way you want. This will greatly facilitate your life. See an example on my site [link removed], a look at the menu.

    A
    Andy024
    New Participant
    February 16, 2012

    Hi Robert

    I had created demo example for you. There is no anchor tag and when you rollover the image you get the bigger one.

    HTML code and its CSS

    ---------------------------------------------------

    <!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>Image Hover Over</title>

    <style type="text/css">

    <!--

    .box {

        background-image: url(http://www.google.co.in/images/srpr/logo3w.png);

        background-repeat: no-repeat;

        width:275px;

        height:95px;

    }

    .box:hover {

            background-image: url(http://www.kurzweilai.net/images/Google-logo.jpg);

        background-repeat: no-repeat;

        width:682px;

        height:400px;

    }

    -->

    </style>

    </head>

    <body>

    <div class="box">

       

    </div>

    </body>

    </html>

    Thanks

    Andy

    P
    photosplus1Author
    Participating Frequently
    February 16, 2012

    Thank you Andy for your interest.

    I am pretty, no, very ignorant regarding html, css etc so please indulge me.

    Do I paste the code as shown below into my page's html. If so where do I

    paste it ?

    I tried it under "body" near top of code page but it returned a lot of

    code in the

    google view. I guess there must be a certain location.

    Thanks in anticipation.

    Robert

    A
    Andy024
    New Participant
    February 17, 2012

    Hi Robert

    Apologize to post late. Here are the steps

    Place the below code just before the closing </head> tag.


    <style type="text/css">

    <!--

    .box {

        background-image: url(http://www.google.co.in/images/srpr/logo3w.png);

        background-repeat: no-repeat;

        width:275px;

        height:95px;

    }

    .box:hover {

            background-image: url(http://www.kurzweilai.net/images/Google-logo.jpg);

        background-repeat: no-repeat;

        width:682px;

        height:400px;

    }

    -->

    </style>

    Place the below code in <body> tag.

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

    Thatz it. Done.

    Make sure when you run the page you are connected to internet.

    Thanks

    Andy


    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices