Friday, May 26, 2023
HomeCSSjavascript - Go back to initial src on mouseout

javascript – Go back to initial src on mouseout


Context: Im attempting to change a photo on mouseover, and also go back to initial on mouseout. WHen i utilize the initial web link of the picture src, it functions. Yet my trouble is that i will certainly have several areas of this. I recognize i can make it function by making a manuscript on each initial src and also input the picture web link there, however exists a method to make it go back to initial img src without including the tough web link of the img?

<< div course=" col-12 text-center">>.
<< h3>> TITLE<.
<< div course=" name-wrapper">
<> < period id=" name1" course=" some-name opacity-0">> Call 1<.
<< period id=" name2" course=" some-name opacity-0">> Call 2<.
<.
<.
<< div course=" col-12">
<> < div course=" img-set">
<> < img src=" images/2023/some-img. jpg" alt=" Some Picture"/>>.
<.
<< div course=" hotspots">
<> < a href=" #" data-src=" images/2023/some-img 2. jpg" data-target=" name1">> test1< < a href=" #" data-src=" images/2023/some-img 3. jpg" data-target=" name2">> test2< .
<.

$(". hotspots a"). mouseover( feature() {

var worth = $( this). attr(' data-src');
$(". img-set img"). attr(" src", worth);

var target = $( this). information(" target");

var targetName = document.getElementById( target);

if($( targetName). attr(' id') == target) {
$(" #" + target). removeClass(" opacity-0");
}
} ).

$(". hotspots a"). mouseout( feature() {

$( '. img-set img' ). attr(" src"," images/2023/some-img. jpg");

var target = $( this). information(" target");
var targetName = document.getElementById( target);

if($( targetName). attr(' id') == target) {
$(" #" + target). addClass(" opacity-0");
}
} );

Just how can i make it to make sure that as opposed to placing in the actuall src, it would certainly be initial src rather.

So i attempted with this and also the entire point does not function any longer

$( record). prepared( feature() {

var original = document.getElementsByClassName(". img-set img"). getAttribute(" src");.

$(". hotspots a"). mouseover( feature() {

var worth = $( this). attr(' data-src');.
$(". img-set img"). attr(" src", worth);.

var target = $( this). information(" target");.

var targetName = document.getElementById( target);.

if($( targetName). attr(' id') == target) {
$(" #" + target). removeClass(" opacity-0");.
}
} ).

$(". hotspots a"). mouseout( feature() {

$( '. img-set img' ). attr(" src", initial);.

var target = $( this). information(" target");.
var targetName = document.getElementById( target);.

if($( targetName). attr(' id') == target) {
$(" #" + target). addClass(" opacity-0");.
}
} );.

} ).

RELATED ARTICLES

Most Popular

Recent Comments