Copy link to clipboard
Copied
On an old web site I was able to rollover a thumbnail and make a "base" image swap out to a larger version of the thumbnail (art site). I want to do this again on the current DW, but I can't figure out how to do it. I tried copying the code from the old site and replacing the names, but it still doesn't work. Can anyone help me with the code for this? I'll copy the existing code here in case that helps. Thanks so much for your attention to this request.
<td width="75"><img src="images/pmb1-tn.gif" alt="pm1" name="pm1" width="75" height="75" id="pm1" onmouseover="MM_swapImage('base','','images/pmb1.gif',1)" onmouseout="MM_swapImgRestore()" /></td>
Also, is there a link to a DreamWeaver manual? I'm having trouble finding one. Thanks again.
Copy link to clipboard
Copied
Instead of the old method that use Javascript to animate/rollover images, the modern method is to use CSS. For more info, Google the subject or see https://www.w3schools.com/css/css3_images.asp
For Dreamweaver tutorials: https://helpx.adobe.com/dreamweaver/how-to/what-is-dreamweaver.html#
Copy link to clipboard
Copied
Here's a simple HTML file that does what you want to do using simple javascript:
https://www.teoria.com/jra/small-large/image-roll.html
Follows the HTML/JS source. Just edit the names of the images names/url to yours or download everything and try it out. Be sure NOT to specify image size. If you want to specify image size, then you should load both images and make one visible and the other invisible to change from one image to the other. jQuery would make things much easier but you can also do it using the document object. Hope this helps!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Image rollover</title>
<script>
function goBig() {
var i = document.getElementById('img');
i.src='large.png';
}
function goSmall() {
var i = document.getElementById('img');
i.src='small.png';
}
</script>
</head>
<body>
<img id="img" src="small.png" onMouseOver="goBig()" onMouseOut="goSmall()">
</body>
</html>
Copy link to clipboard
Copied
If that's all of the code you copied over from the old page, the reason it won't work would be because you're missing the <script> from the <head> section that makes the code above "do something".
You'll have a <script> tag in the <head> of the old page with lots of "MM_..." throughout (DW's behavior script style). That entire script tag would also need to be copied over to the new page or the code you've posted above can't do anything.
Copy link to clipboard
Copied
This depends on what it is you are trying to achieve.
If you have just the one image per page you are swapping then you have already been given some options to explore in the other responses to your post. If you have a gallery of art thumbnails and would like to show a larger version of the thumbnail image then maybe a better solution would be an image gallery which opens a modal overlay window ontop of the tumbnails.
I cant really see from your code how your page is set up but it appears the larger image will just displace the smaller image which is probably not a good solution, plus I would NOT use 'onmouseover', use 'onclick' as that will be compatible with non-desktop devices.
Copy link to clipboard
Copied
What Ben said.
Look for a responsive Lightbox or Modal window viewer that provides a good experience on ALL devices, especially touch screens which the majority of people use now.
Copy link to clipboard
Copied
Ugh - jQuery lightbox galleries, so yesterday!
Copy link to clipboard
Copied
Osgood,
MM Rollover scripts are a thowback to 2004. How much more "yesterday" can one get?
Copy link to clipboard
Copied
I agree but replace them with a vanilla javascript solution NOT jQuery. Come the end of the year Bootstrap will finally drop jQuery but it will still be way behind the curve as it wont have grid.........hey ho, only another 2 years to wait!
Copy link to clipboard
Copied
Bootstrap has their reasons for dropping jQuery dependency. That won't stop people from using it though.
Copy link to clipboard
Copied
The reason is.........things move on in web-development, much like most of us have moved on from using nonsense like this: onmouseover="MM_swapImage('base','','images/pmb1.gif',1)"
It wont stop poor developers using jQuery, no, I agree, they use plenty of poor solutions but more will and have moved away from jQuery and will continue to do so over time. I think any new project going foward should use whats current or at least try, not something that filled a gap due to inconsitant browser rendering, which is not applicable now.
Hopefully more profesionals will move away from Bootstrap as it can't keep pace with what's current, always a few years behind. I think a lot of better developers already had done so, although a few now say because its dropping jQuery they may take another look.......others will be taking advantage of grid and not look back.
Bootstraps greatest new feature in v5 seems to be creating ones own utility classes using Sass, which anyone who uses php could do for years prior, if needed. Still let's at least commend it for dropping both jQuery and support for IE, plus revisng how many redundant <div> tags it kicks out for laying out certain components. Its slowly catching up and waking up to modern web-development.