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
Jump to PostPlease don't! I am totally sick of this kind of page. They make me hit the BACK button.
Jump to PostHey, 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 …
Please don't! I am totally sick of this kind of page. They make me hit the BACK button.
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>not working as asked
Well, I'm outta ideas but i'll try to get other codes.
ok
waiting for ur help
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.
thnx buddy its working now
Woohoo!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.