•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,597 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,665 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1002 | Replies: 8 | Solved
 |
•
•
Join Date: May 2008
Posts: 1
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
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
•
•
Join Date: Jan 2007
Posts: 2,510
Reputation:
Rep Power: 7
Solved Threads: 103
Please don't! I am totally sick of this kind of page. They make me hit the BACK button.
Daylight-saving time uses more gasoline
•
•
Join Date: Apr 2008
Location: PLANET EARTH
Posts: 33
Reputation:
Rep Power: 1
Solved Threads: 2
Light Poster
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...
)
(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> Greetings Earthlings, I am your PROGRAMMER.
•
•
Join Date: May 2008
Posts: 12
Reputation:
Rep Power: 1
Solved Threads: 1
Newbie Poster
not working as asked
•
•
Join Date: Apr 2008
Location: PLANET EARTH
Posts: 33
Reputation:
Rep Power: 1
Solved Threads: 2
Light Poster
Well, I'm outta ideas but i'll try to get other codes.
Greetings Earthlings, I am your PROGRAMMER.
•
•
Join Date: May 2008
Posts: 12
Reputation:
Rep Power: 1
Solved Threads: 1
Newbie Poster
ok
waiting for ur help
waiting for ur help
•
•
Join Date: Jan 2008
Posts: 37
Reputation:
Rep Power: 1
Solved Threads: 6
Light Poster
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:
Then if you were to apply some CSS styles like the following:
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.
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.
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Linear Mode
Other Threads in the HTML and CSS Forum
- Previous Thread: Taking the plunge into Layers
- Next Thread: div box with vertical scrollbar and hoizontal wrap
