Member Avatar for magdi_alafifi

hi,

okey here's what i'm trying to do..
i'm making a gallery .. when u roll over on the thumbnail -which is actually a text image- the big photo swaps to a 50% opacity image and when u click it swaps to the same photo with 100% opacity
so what's the proplem ?
the proplem is in the "restore image on mouse out" option .. i wanted to restore image on mouse out for the "mouseover" behavior but not the "onClick" behaviour .. which doesn't seem to work .. cuz that option workeS for them both togeather -if i uncheck one the other goes unchecked automatically- so is there a way to set each of them individually ?

  • 2 Contributors
  • 2 Replies
  • 84 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by magdi_alafifi

Dani AI

Generated

Dreamweaver's generated swap/restore helper is the reason for the behaviour you describe: the restore handler will reset the recorded original image regardless of whether the change came from a mouseover or a click. As discovered, the built-in Restore option can't be split per action. was right to suggest coding it yourself (or using a gallery/plugin). A small, stateful script gives full control: set a "locked" flag when a thumbnail is clicked and only run the mouseout restore when that flag is not set.

Example approach (unobtrusive JS with data- attributes):

<img id="main" src="images/main-default.jpg" alt="Main">

<img class="thumb" src="images/thumb1.jpg"
  data-default="images/main-default.jpg"
  data-hover="images/main-hover1.png"
  data-active="images/main1-full.png" />
var main = document.getElementById('main');

document.querySelectorAll('.thumb').forEach(function(thumb){
  thumb.addEventListener('mouseover', function(){
    if (!main.dataset.locked) main.src = thumb.dataset.hover;
  });
  thumb.addEventListener('mouseout', function(){
    if (!main.dataset.locked) main.src = thumb.dataset.default;
  });
  thumb.addEventListener('click', function(){
    main.dataset.locked = 'true';
    main.src = thumb.dataset.active;
  });
});

Notes: remove Dreamweaver inline swap/restore attributes so they do not interfere. Preload hover/active images to avoid flicker. If clicking a new thumbnail should replace a previous click, keep the same click handler (it will update the main src and keep the lock). To allow an "unlock" (click again to revert), toggle main.dataset.locked in the click handler instead of always setting it.

Recommended Answers

All 2 Replies

Member Avatar for dany12

yes code manually or use a jquery plugin like galeria

Member Avatar for magdi_alafifi

hi danny,
that's the code i have now

<img src="images/logos_gallery_08.jpg" alt="" width="66" height="38" onClick="MM_swapImage('main','','logos_gallery_image/image2.png',1)" onMouseOver="MM_swapImage('main','','logos_gallery_image/roll over2.png',1)" onMouseOut="MM_swapImgRestore()">

but unfortunately i couldn't figure out a way to do it in coding either.. "onMouseOut" applies to both behaviours..

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.