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

    P
    photosplus1Author
    Participating Frequently
    February 21, 2012

    WebStudio 5 writes terrible code.  I wouldn't use it.

    If you go to this link, and click on images, you'll see how FancyBox works (ignore rotation, you don't need that). And it's very simple to set up.  http://alt-web.com/GALLERY/Photo_Gallery.html

    If you want to hire me to help you with this, you can contact me through my web site.

    http://alt-web.com/contact.shtml

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb


    Hello Nancy,

    I had a look at at the gallery link below. However, on mouseover it

    shows a same size image

    but with a different colour. To actually get a larger and /or different

    image you must

    click the link. This is only a demo in rollover images with a hyperlink

    connecting to an image

    at a different URL. I can do this but my customer want a

    larger/different image on mpuseover.

    I see a lot of these on modern web pages,

    Please comment on this.

    Regards,

    Robert

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