84 views

Afbeelding wijzigen op zweven met CSS / HTML

Hosted by Code Expert
html

Ik heb dit probleem waar ik een afbeelding heb ingesteld om een ​​andere afbeelding weer te geven wanneer de muis overheert, maar het eerste beeld verschijnt en de nieuwe niet verandert de hoogte en de breedte en overlapt de andere. Ik ben nog steeds behoorlijk nieuw voor HTML / CSS, dus ik heb misschien iets eenvoudigs gemist. Hier is de code: 

<img src="LibraryTransparent.png" id="Library">

#Library {
    height: 70px;
    width: 120px;
}
#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}

Antwoord 1, Autoriteit 100%

Eén oplossing is om ook het eerste beeld te gebruiken als een achtergrondafbeelding als deze: 

<div id="Library"></div>

#Library {
   background-image: url('LibraryTransparent.png');
   height: 70px;
   width: 120px;
}
#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

Als uw Hover-afbeelding een andere maat heeft, moet u ze zo instellen: 

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;
}

Antwoord 2, Autoriteit 114%

Een andere optie is om JS te gebruiken: 

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />

Antwoord 3, Autoriteit 55%

Wat ik meestal doe, is dat ik een dubbele afbeelding maak met beide toestanden, die zich gedragen als een soort film met twee frames die ik vervolgens gebruik als achtergrond voor het originele element, zodat het element de breedte / hoogte heeft ingesteld in pixels, wat resulteert in het tonen van slechts de helft van het beeld. Wat de hover-status definieert, is in feite “verplaats de film om het andere frame te tonen”.

Stel je bijvoorbeeld voor dat de afbeelding een grijze Tux moet zijn, die we moeten veranderen in een kleurrijke Tux bij de muisaanwijzer. En het “hosting” element is een span met id “tuxie”.

  1. Ik maak een afbeelding van 50 x 25 met twee smokings, één in kleur en één in grijs,
  2. wijs de afbeelding vervolgens toe als achtergrond voor een spanwijdte van 25 x 25,
  3. en stel ten slotte de muisaanwijzer in om de achtergrond eenvoudig 25 px naar links te verplaatsen.

De minimale code:

<style>
    #tuxie {
        width: 25px; height: 25px;
        background: url('images/tuxie.png') no-repeat left top;
    }
    #tuxie:hover { background-position: -25px 0px }
</style>
<div id="tuxie" />

en de afbeelding:

Voordelen zijn:

  • Door beide frames in één bestand te plaatsen, wordt ervoor gezorgd dat ze worden geladen
    onmiddelijk. Dit vermijdt de lelijke storing op langzamere verbindingen wanneer de
    ander frame laadt nooit direct, dus eerst hoveren werkt nooit goed.

  • Het is wellicht gemakkelijker om uw afbeeldingen op deze manier te beheren sinds “gekoppelde” frames
    zijn nooit verward.

  • Met slim gebruik van Javascript of CSS selector kan men dit uitbreiden en
    nog meer frames in één bestand opnemen.

    In theorie zou je zelfs meerdere knoppen in één bestand kunnen plaatsen en besturen
    hun weergave op coördinaten, hoewel een dergelijke benadering snel zou kunnen worden
    uit de hand.

Merk op dat dit is gebouwd met de backgroundCSS-eigenschap, dus als je het echt met <img />s wilt gebruiken, moet je nietstel de eigenschap srcin, aangezien die de achtergrond overlapt. (Bedenk dat slim gebruik van transparantie hier tot interessante resultaten zou kunnen leiden, maar waarschijnlijk erg afhankelijk van de kwaliteit van het beeld en van de engine.)

Antwoord 4, autoriteit 41%

Gebruik content:

#Library {
    height: 70px;
    width: 120px;
}
#Library:hover {
    content: url('https://www.furrytalk.com/wp-content/uploads/2010/05/2.jpg');
    height: 70px;
    width: 120px;
}

JSFiddle

Antwoord 5, autoriteit 8%

.hover_image:hover {text-decoration: none} /* Optional (avoid undesired underscore if a is used as wrapper) */
.hide {display:none}
/* Do the shift: */
.hover_image:hover img:first-child{display:none}
.hover_image:hover img:last-child{display:inline-block}
<body> 
    <a class="hover_image" href="#">
        <!-- path/to/first/visible/image: -->
        <img src="https://farmacias.dariopm.com/cc2/_cc3/images/f1_silverstone_2016.jpg" />
        <!-- path/to/hover/visible/image: -->
        <img src="https://farmacias.dariopm.com/cc2/_cc3/images/f1_malasia_2016.jpg" class="hide" />
    </a>
</body>

Antwoord 6, autoriteit 5%

Het probleem met alle eerdere antwoorden is dat de Hover-afbeelding niet is geladen met de pagina, dus wanneer de browser het noemt, het kost tijd om te laden en het geheel er niet echt goed uitziet.

Wat ik doe, is dat ik het originele beeld en de beweegafbeelding in 1-element zet en eerst de bewegingsafbeelding verbergen. Toen in het zweeft in beweegt ik de zweeftafbeelding en verberg de oude, en bij bewegen doe ik het tegenovergestelde.

HTML: 

<span id="bellLogo" onmouseover="hvr(this, 'in')" onmouseleave="hvr(this, 'out')">
  <img src="stylesheets/images/bell.png" class=bell col="g">
  <img src="stylesheets/images/bell_hover.png" class=bell style="display:none" col="b">
</span>

JavaScript / jQuery: 

function hvr(dom, action)
{
    if (action == 'in')
    {
        $(dom).find("[col=g]").css("display", "none");
        $(dom).find("[col=b]").css("display", "inline-block");
    }
    else
    {
        $(dom).find("[col=b]").css("display", "none");
        $(dom).find("[col=g]").css("display", "inline-block");
    }
}

Dit voor mij is de gemakkelijkste en meest efficiënte manier om het te doen.

Antwoord 7, Autoriteit 3%

U kunt de afbeelding van een HTML IMG vervangen zonder een achtergrondafbeeldingen in de container DIV te hoeven maken.

Dit wordt verkregen met behulp van de CSS-eigendom box-sizing: border-box;(het geeft u een mogelijkheid om een ​​soort zwevendeffect op een <IMG>zeer efficiënt.)

Om dit te doen, breng een klasse als volgt toe op uw afbeelding: 

.image-replacement {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(https://akamaicovers.oreilly.com/images/9780596517748/cat.gif) no-repeat;/* this image will be shown over the image iSRC */
  width: 180px;
  height: 236px;
  padding-left: 180px;
}

Voorbeeldcode: http://codepen.io/chriscoyier/pen/cJEjs

Origineel artikel:
http://css-tricks.com/replace- de-afbeelding-in-een-img-met-css/

Ik hoop dat dit sommigen van jullie zal helpen die geen div willen plaatsen om een afbeelding te krijgen met een “zwevend” effect.

Hier de voorbeeldcode plaatsen:

HTML:

<img id="myImage" src="images/photo1.png" class="ClassBeforeImage-replacement">

jQuery:

$("#myImage").mouseover(function () {
    $(this).attr("class", "image-replacement");
});
$("#myImage").mouseout(function () {
    $(this).attr("class", "ClassBeforeImage-replacement");
});

Antwoord 8, autoriteit 2%

U kunt CSS niet gebruiken om SRC-kenmerken van afbeeldingen te wijzigen (tenzij de browser dit ondersteunt).
Misschien wil je jQuery gebruiken met de hover-gebeurtenis.

$("#Library ").hover(
    function () {
         $(this).attr("src","isHover.jpg");
    },
    function () {
        $(this).attr("src","notHover.jpg");
    }
);

Antwoord 9

Verander de tag imgin een div en geef deze een achtergrond in CSS.

Antwoord 10

probeer er een 

<img src='images/icons/proceed_button.png' width='120' height='70' onmouseover="this.src='images/icons/proceed_button2.png';" onmouseout="this.src='images/icons/proceed_button.png';" />

of als je afbeelding als knop in vorm gebruikt

<input type="image" id="proceed" src="images/icons/proceed_button.png" alt"Go to Facebook page" onMouseOver="fnover();"onMouseOut="fnout();" onclick="fnclick()">
function fnover()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button2.png";
        }
        function fnout()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button.png";
        }

Antwoord 11

.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
<body> 
    <a class="foo" href="#">
        <img src="https://lojanak.com/image/9/280/280/1/0" />
        <img src="https://lojanak.com/image/0/280/280/1/0" />
    </a>
</body>

Antwoord 12

controleer deze viool

Ik denk dat het afbeeldingspad in jouw geval verkeerd is

de syntaxis ziet er goed uit

background-image:url('https://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');

Antwoord 13

Het probleem is dat je de eerste afbeelding instelt via het attribuut ‘src’ en bij de muisaanwijzer een achtergrondafbeelding aan de afbeelding toevoegt.
probeer dit:

in html gebruik: 

<img id="Library">

vervolgens in css:

#Library {
    height: 70px;
    width: 120px;
    background-image: url('LibraryTransparent.png');
}
#Library:hover {
    background-image: url('LibraryHoverTrans.png');
}

Antwoord 14

Zoals u de dingen doet, zal het niet gebeuren. U wijzigt de achtergrondafbeelding van de afbeelding, die wordt geblokkeerd door de originele afbeelding. Het veranderen van de hoogte en breedte zal ook niet gebeuren. Om het src-attribuut van de afbeelding te wijzigen, hebt u Javascript of een Javascript-bibliotheek zoals jQuery nodig. U kunt de afbeelding echter wijzigen in een eenvoudig div- (tekst)vak en een achtergrondafbeelding hebben die verandert bij het zweven, ook al is het div-vak zelf leeg. Hier is hoe.

<div id="emptydiv"></div>
#emptydiv {
background-image: url("LibraryHover.png");
height: 70px;
width: 120px;

}

#emptydiv:hover {
background-image: url("LibraryHoverTrans.png");
height: 700px;
width: 1200px;
}

Ik hoop dat dit is waar je om vraagt 🙂

Antwoord 15

Met ieders antwoord met behulp van de optie Achtergrondafbeelding missen een attribuut. De hoogte en breedte zullen de containergrootte voor de afbeelding instellen, maar zal de afbeelding zelf niet wijzigen. Achtergrondformaat is nodig om de afbeelding te comprimeren of uit te rekken om aan deze container te passen. Ik heb het voorbeeld van het ‘beste antwoord’ gebruikt 

<div id="Library"></div>
#Library {
   background-image: url('LibraryTransparent.png');
   background-size: 120px;
   height: 70px;
   width: 120px;
}
#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

Antwoord 16

Mijn jQuery-oplossing. 

function changeOverImage(element) {
        var url = $(element).prop('src'),
            url_over = $(element).data('change-over')
        ;
        $(element)
            .prop('src', url_over)
            .data('change-over', url)
        ;
    }
    $(document).delegate('img[data-change-over]', 'mouseover', function () {
        changeOverImage(this);
    });
    $(document).delegate('img[data-change-over]', 'mouseout', function () {
        changeOverImage(this);
    });

en html 

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20original%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20over%20/%3E&w=342&h=300" />

Demo: jsfiddle demo

Regards

Antwoord 17

Live-voorbeeld: jsfiddle

Het geaccepteerde antwoord heeft een probleem. Het beeld is daar niet aangepast. Gebruik accommodatie op achtergrond-formaat voor het wijzigen van de afbeelding.

HTML: 

<div id="image"></div>

CSS: 

#image {
   background-image: url('image1');
   background-size: 300px 390px;
   width: 300px;
   height:390px;
}
#image:hover{
  background: url("image2");
  background-size: 300px 390px;
}

Antwoord 18

Wat ik zou aanraden is om alleen CSS te gebruiken indien mogelijk.
Mijn oplossing zou zijn:

HTML: 

<img id="img" class="" src="" />

CSS: 

img#img{
    background: url("pictureNumberOne.png");
    background-size: 100px 100px;
    /* Optional transition: */
    transition: background 0.25s ease-in-out;
}
img#img:hover{
    background: url("pictureNumberTwo.png");
    background-size: 100px 100px;
}

Dat (niet definiëren van het ATRIBUTE SRC , zorgt er ook voor dat transparante afbeeldingen (of afbeeldingen met transparante onderdelen) correct worden getoond (anders, als de tweede foto half transparant zou zijn, zou u het ook zien delen van de eerste foto).

De achtergrond-formaat attribuut wordt gebruikt om de hoogte en breedte in te stellen van een achtergrondafbeelding.

Als u (om welke reden dan ook) u de BG-afbeelding van een afbeelding niet wilt wijzigen, kunt u de afbeelding ook in een div-container plaatsen als volgt:

HTML: 

<div id="imgContainer" class="">
    <img id="" class="" src="" />
</div>

… enzovoort.

Antwoord 19

Gebruik “Inhoud:;” bij de hover.Deze werken.

Antwoord 20

Gebruik Photoshop en maak twee van dezelfde afbeelding, de 1e is hoe je wilt dat het eruit ziet, de 2e zijn hoe je wilt dat het eruit ziet wanneer het overheem is. Ik wikkel het beeld in een <a>tag, omdat ik ervan uitgaan dat het is wat je wilt. Voor dit voorbeeld doe ik een Facebook-pictogram dat desaturateerd is, maar wanneer er overheem is, toont het de blauwe kleur van Facebook. 

<a href="www.facebook.com"><img src="place of 1st image" onmouseover="this.src='place of 2nd image'" onmouseout="this.src='place of 1st image'"></a>

Antwoord 21

Hier is de eenvoudige truc. Kopieer en plak het gewoon. 

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Change Image on Hover in CSS</title>
    <style type="text/css">
        .card {
            width: 130px;
            height: 195px;
            background: url("../images/card-back.jpg") no-repeat;
            margin: 50px;
        }
        .card:hover {
            background: url("../images/card-front.jpg") no-repeat;
        }
    </style>
    </head>
    <body>
        <div class="card"></div>
    </body>
    </html>

Antwoord 22

Ik had een soortgelijk probleem.

Met mijn knop gedefinieerd zoals: 

<button  id="myButton" class="myButtonClass"></button>

Ik had de achtergrondstyling als volgt:

#myButton{ background-image:url(img/picture.jpg)}
.myButtonClass{background-image:url(img/picture.jpg)}
.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

Toen ik het overschakelde naar:

#myButton{}
.myButtonClass{background-image:url(img/picture.jpg)}
.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

De hover-over-functie werkte prima.

(niet ingaan op andere kenmerken zoals grootte en positie van afbeelding of container, alleen de achtergrondafbeelding verandert)

Previous articleHoe regelnummers inschakelen in IDLE?
Next article‘kan git-upload-pack niet openen’-fout in Eclipse bij het klonen of pushen van git-repository

Other episodes

Invoertype=wachtwoord, laat de browser het wachtwoord niet onthouden

html Code Expert - 0
Ik herinner me dat ik een manier heb gezien om een ​​<input type="password" />te hebben, zodat de browser nietde gebruiker vraagt ​​om het wachtwoord...
Read more

VueJS/browser caching productie builds

html Code Expert - 0
Ik heb een VueJS-app. Telkens wanneer ik npm run builduitvoer, wordt er een nieuwe set dist/*-bestanden gemaakt, echter wanneer ik ze op de server...
Read more

Verhogingspijlen aanpassen bij invoer van typenummer met CSS

html Code Expert - 0
Ik heb een typenummer ingevoerd dat wordt weergegeven met de volgende code: <input class="quantity" id="id_form-0-quantity" min="0" name="form-0-quantity" value="1" type="number"> Het ziet er zo uit: Ik zou...
Read more

Angular 4 img src is niet gevonden

html Code Expert - 0
Ik heb een probleem met het vinden van een afbeelding met hoek 4. Hij blijft me vertellen dat de afbeelding niet is gevonden. Mapstructuur: app_folder/ app_component/ ...
Read more

HTML-tags binnen <label>

html Code Expert - 0
Ik heb een tabel op een pagina die bestaat uit selectievakjes in de cellen aan de linkerkant en beschrijvingen in de cellen aan de...
Read more

Items die alle kolommen/rijen beslaan met behulp van CSS-rasterlay-out

html Code Expert - 0
Nu de CSS-rasterlay-outmodule binnenkort in Firefox en Chrome wordt geleverd, dacht ik dat ik zou proberen te begrijpen hoe ik het moet gebruiken. Ik heb...
Read more

Angular 2 Hash (#) van de URL verwijderen

html Code Expert - 0
Ik probeer het #-teken van de url in Angular 2 te verwijderen, maar ik kon geen goede uitleg vinden over hoe ik het kan...
Read more

© Copyright - Code Expert 2021