DaniWeb IT Discussion Community

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)
-   HTML and CSS (http://www.daniweb.com/forums/forum143.html)
-   -   Smaller image to larger Image on rollover (http://www.daniweb.com/forums/thread121868.html)

kanga62 May 1st, 2008 1:33 am
Smaller image to larger Image on rollover
 
Hi....

I was wondering if anyone could help me. I'm putting together a website in Dreamweaver and using html, I have several images on the page and what I want to be able to do is when someone rolls over smaller image they get a larger image come up. I don't want them to click image and have it open on another page, I want the page to stay the same and have the larger image come up. Is there away to do this in Dreamweaver?

Thanking you in advance:)
Kanga

MidiMagic May 2nd, 2008 2:13 am
Re: Smaller image to larger Image on rollover
 
Please don't! I am totally sick of this kind of page. They make me hit the BACK button.

Dannyo329 May 2nd, 2008 5:33 am
Re: Smaller image to larger Image on rollover
 
Hey, um i'm not sure if this works but if it actually works that'll be great, there's only one thing you need to change, the img src, its image1(and 2).bmp but you can change it into any image file.
(this better work...:-/ )

<html>

<head>

<title>TEST</title>

<body bgcolor="#ffcc00">

<center>

   <form name=form1>

     <img src="image1.bmp" name="image1" 

                           onMouseOver="image1over()"

                           onMouseOut="image1out()"  >

      <br /><br />

     <img src="image2.bmp" name="image2"

                          onMouseOver="image2over()"

                           onMouseOut="image2out()" > 

     <br /><br />

     <br /><br />

   </form>

</center>

</body>

<script language=javascript>

<!--

    function image1over()

    {

        image1.style.width="50";

        image1.style.height="50";

    }

    function image2over() 

    {

        image2.style.width="50";

        image2.style.height="50";

    }



    function image1out()

    {

        image1.style.width="25";

        image1.style.height="25";

    }

    function image2out()

    {

        image2.style.width="25";

        image2.style.height="25"; 

    }

//-->

<script>

</html>                             

andy_aphale May 4th, 2008 1:00 pm
Re: Smaller image to larger Image on rollover
 
not working as asked

Dannyo329 May 5th, 2008 5:23 am
Re: Smaller image to larger Image on rollover
 
Well, I'm outta ideas but i'll try to get other codes.

andy_aphale May 5th, 2008 1:24 pm
Re: Smaller image to larger Image on rollover
 
ok
waiting for ur help

robothy May 7th, 2008 8:48 am
Re: Smaller image to larger Image on rollover
 
Hi,

One option, which I have used in a different manner is to have a separate div display on hover.
The HTML for it would be something like this:
<a class="enlarge_picture" href="#" title="Picture Name">

        <img class="normal_picture" src="./the/path/to/your/image.png" alt="Image Name" height="60" width="140"><div class="hover_enlarge"><img class="large_picture" src="./the/path/to/your/bigger_image.png" alt="Image Name" height="120" width="280"></div>

</a>

Then if you were to apply some CSS styles like the following:
.enlarge_picture {

        margin: 0px; padding: 0px; border: none;

        text-decoration: none;

}



.normal_picture .hover_enlarge {

        display: none;

}



.normal_picture:hover > .hover_enlarge {

        position: relative; top: -100px; left: 100px;

        display: block;

        height: 173px; width: 213px;

        margin: 0px; padding: 0px; border: none;

}

For a good example of this, go to istockphoto.com, as they do exactly the same as you're asking.

And I the styles above will almost certainly need tweaking, as I've not tested them.

Best,
R.

andy_aphale May 7th, 2008 12:30 pm
Re: Smaller image to larger Image on rollover
 
thnx buddy its working now

Dannyo329 May 8th, 2008 5:37 am
Re: Smaller image to larger Image on rollover
 
Woohoo!


All times are GMT -4. The time now is 3:52 am.

Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC