Highlighted

Swap an image upon rollover

New Here ,
Jul 01, 2020

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.

Views

93

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Swap an image upon rollover

New Here ,
Jul 01, 2020

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.

Views

94

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jul 01, 2020

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#

 

 

 


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Jul 02, 2020

Copy link to clipboard

Copied

Here's a simple HTML file that does what you want to do using simple javascript&colon;

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jul 02, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jul 02, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jul 02, 2020

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.

 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jul 02, 2020

Copy link to clipboard

Copied

Ugh - jQuery lightbox galleries, so yesterday!

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jul 02, 2020

Copy link to clipboard

Copied

Osgood,

MM Rollover scripts are a thowback to 2004.  How much more "yesterday" can one get?

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jul 02, 2020

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jul 02, 2020

Copy link to clipboard

Copied

Bootstrap has their reasons for dropping jQuery dependency.  That won't stop people from using it though.

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
osgood_ LATEST
LEGEND ,
Jul 03, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...