de-vraag
  • Otázky
  • Značky
  • Používatelia
Oznámenia
Odmeny
Registrácia
Po registrácii budete informovaní o odpovediach a komentároch na vaše otázky.
Prihlásiť sa
Ak už máte konto, prihláste sa a skontrolujte nové oznámenia.
Za pridané otázky, odpovede a komentáre budú udelené odmeny.
Viac na
Zdroj
Upraviť
Sachin Gaur
Sachin Gaur
Question

Zmena zdroja obrázka pri prevrátení pomocou jQuery

Mám niekoľko obrázkov a ich rolovacích obrázkov. Pomocou jQuery chcem zobraziť/skryť rolovací obrázok, keď nastane udalosť onmousemove/onmouseout. Názvy všetkých mojich obrázkov sa riadia rovnakým vzorom, napríklad takto:

Pôvodný obrázok: Obrázok.gif`

Rollover Image: Imageover.gif

Chcem vložiť a odstrániť "over" časť zdroja obrázku v udalosti onmouseover a onmouseout.

Ako to môžem urobiť pomocou jQuery?

442 2009-02-12T07:28:30+00:00 3
 lowtechsun
lowtechsun
Edited question 18 apríl 2016 в 10:12
Programovanie
html
jquery
This question has 1 odpoveď in English, to read them log in to your account.
Solution / Answer
Jarrod Dixon
Jarrod Dixon
12 február 2009 в 7:31
2009-02-12T07:31:48+00:00
Viac na
Zdroj
Upraviť
#8818288

Nastavenie na pripravenosť:

$(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("over.gif", ".gif");
            $(this).attr("src", src);
        });
});

Pre tých, ktorí používajú zdroje obrázkov url:

$(function() {
        $("img")
            .mouseover(function() {
               var src = $(this).attr("src");
               var regex = /_normal.svg/gi;
               src = this.src.replace(regex,'_rollover.svg');
               $(this).attr("src", src);

            })
            .mouseout(function() {
               var src = $(this).attr("src");
               var regex = /_rollover.svg/gi;
               src = this.src.replace(regex,'_normal.svg');
               $(this).attr("src", src);

            });
    });
 jemmamariex3
jemmamariex3
Edited answer 4 január 2019 в 4:41
619
0
 Tyson
Tyson
12 február 2009 в 7:54
2009-02-12T07:54:36+00:00
Viac na
Zdroj
Upraviť
#8818291

Viem, že sa pýtate na použitie jQuery, ale rovnaký efekt môžete dosiahnuť aj v prehliadačoch s vypnutým JavaScriptom pomocou CSS:

#element {
    width: 100px; /* width of image */
    height: 200px; /* height of image */
    background-image: url(/path/to/image.jpg);
}

#element:hover {
    background-image: url(/path/to/other_image.jpg);
}

Je tu dlhší popis tu

Ešte lepšie je však použiť sprity: simple-css-image-rollover.

ankit suthar
ankit suthar
Edited answer 8 september 2017 в 11:24
114
0
Ionuț Staicu
Ionuț Staicu
12 február 2009 в 7:51
2009-02-12T07:51:06+00:00
Viac na
Zdroj
Upraviť
#8818290
$('img.over').each(function(){
    var t=$(this);
    var src1= t.attr('src'); // initial src
    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension
    t.hover(function(){
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   
    }, function(){
        $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
    });
});

Možno budete chcieť zmeniť triedu obrázkov z prvého riadku. Ak potrebujete viac tried obrázkov (alebo inú cestu), môžete použiť

$('img.over, #container img, img.anotherOver').each(function(){

a tak ďalej.

Malo by to fungovať, netestoval som to :)

 pawelmech
pawelmech
Edited answer 15 marec 2011 в 2:40
21
0
Pridať otázku
Kategórie
Všetky
Technológia
Kultúra / Rekreácia
Život / Umenie
Veda
Profesionálne
Obchod
Používatelia
Všetky
New
Popular
1
Zuxriddin Muydinov
Registered pred 12 hodinami
2
Денис Анненский
Registered pred 2 dňami
3
365
Registered pred týždňom
4
True Image
Registered pred týždňom
5
archana agarwal
Registered pred týždňom
BG
DE
EL
ES
FR
ID
IT
JA
KO
NL
PT
RU
SK
TR
ZH
© de-vraag 2022
Zdroj
stackoverflow.com
na základe licencie cc by-sa 3.0 s uvedením autora