Member Avatar for kanga62

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
  • 335 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Dannyo329

Dani AI

Generated

A few practical notes and a simple, reliable pattern you can drop into Dreamweaver.

— Dreamweaver won't get in the way: add a little HTML and CSS (or paste the CSS into an external stylesheet) and preview in Live view. 's overlay idea is the right direction; 's JavaScript-resize approach points out a common pitfall (layout shifting). And is right to warn: oversized hover popups can annoy users, so keep the effect modest and avoid covering important UI.

A low-friction, accessible approach is CSS-only: keep the small image in the page flow and show the larger preview from a positioned pseudo-element so the page layout does not reflow. The snippet below demonstrates the pattern — replace the filenames and tweak sizes/position to fit your layout.

<div class="thumb" tabindex="0" aria-label="Product name">
  <img src="thumb.jpg" alt="Short description">
</div>

.thumb { position: relative; display: inline-block; }
.thumb img { display: block; width: 120px; height: auto; }

.thumb::after {
  content: "";
  position: absolute;
  left: 110%;
  top: 0;
  width: 320px;
  height: 240px;
  margin-left: 12px;
  background: url("large.jpg") center/contain no-repeat;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 999;
}
.thumb:hover::after,
.thumb:focus-within::after { opacity: 1; transform: translateY(-2px); }

Practical tips: preload the large images (or use link rel="preload" as="image"), use :focus-within or tabindex="0" so keyboard users can see the preview, and switch to a click-to-toggle behavior on touch (small JS to add/remove a class) so taps don’t produce accidental popups. Keep alt text meaningful because the large preview in CSS is decorative to assistive tech. Finally, test across browsers and mobile sizes and keep the preview unobtrusive so it helps, not annoys (as described).

Recommended Answers

All 8 Replies

Member Avatar for MidiMagic

Please don't! I am totally sick of this kind of page. They make me hit the BACK button.

Member Avatar for Dannyo329

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>
Member Avatar for andy_aphale

not working as asked

Member Avatar for Dannyo329

Well, I'm outta ideas but i'll try to get other codes.

Member Avatar for andy_aphale

ok
waiting for ur help

Member Avatar for blocblue

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.

Member Avatar for andy_aphale

thnx buddy its working now

Member Avatar for Dannyo329

Woohoo!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.