0

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

5
Contributors
8
Replies
9
Views
9 Years
Discussion Span
Last Post by Dannyo329
0

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>
0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.