Schimbarea imaginii pe hover

Am nevoie de un meniu format din imagini, iar imaginile ar trebui să se schimbe atunci când cineva se hrănește în jurul ei.

HTML

<div id="menu" >  
    logo
</div>

CSS

#menu {
        margin-left    : 353px;
        margin-top     : -70px;
        padding-bottom : 16px;
}

#home {
        background     : transparent url(images/about.png);
        z-index        : 1;
}

#home:hover {
        background     : url(images/aboutR.png);
        z-index        : 2;
}

Problema cu care mă confruntă este că atunci când hover în jurul elementului de meniu, imaginea care va fi afișată pe hover este afișată în partea din spate a imaginii vechi. Mai mult, imaginea de fundal afișată este foarte mică în lățime și înălțime. Te rog ajuta. Mulțumiri ! [introduceți descrierea imaginii aici] [1]

0
@Shredder: jQuery?
adăugat autor Fahad Uddin, sursa
@Shredder: Vă mulțumim că ați menționat jQuery. A făcut-o cu jQuery. Multumesc din nou.
adăugat autor Fahad Uddin, sursa
@Shredder: Da, cred că ar trebui să merg la jQuery. Ar trebui să citească puțin. Am facut jQuery, dar a fost un timp.
adăugat autor Fahad Uddin, sursa
Am citit un bun articol despre el, acesta aici
adăugat autor Fahad Uddin, sursa
da. Ai putea merge cu JavaScript simplu, dar jQuery va fi mai ușor. Veți putea să vă cartografiați eficient efectele, acțiunile și așa mai departe. Cu CSS veți căuta doar lucruri care se învecinează cu hacks, dar meniul și sfârșitul de navigare sunt mult mai mult decât doar imagini pe hover.
adăugat autor Denys Séguret, sursa
@ Sparky672 Ar putea fi mai ușor cu markup-urile OP pentru a comuta sursa img cu evenimentele js.
adăugat autor Nick Rolando, sursa
Ești deschis la soluțiile js/jQuery?
adăugat autor Nick Rolando, sursa
Ar trebui să încercați să faceți acest lucru cu JavaScript în schimb.
adăugat autor Nick Rolando, sursa
adăugat autor Sparky, sursa
Citat OP: "O portocalie (Despre noi) este imaginea de hover ..." - Nu văd nimic portocaliu.
adăugat autor Sparky, sursa
@Shredder, de ce este preferat JavaScript peste CSS Sprites?
adăugat autor Sparky, sursa

9 răspunsuri

ați putea face: hover img {display: none} care ar scăpa de img, idk despre dimensiunea bc problema nu ați specificat dimensiunile. dacă aș fi fost, aș șterge elementul img, folosește-l ca imagine de fundal pentru un element, apoi schimba-l pe: hover. sau dacă doriți elementul img, utilizați proprietatea clip după aceleași principii ca mai sus

0
adăugat
În loc de display: none ar trebui să fie visibility: hidden pentru a păstra dimensiunea casetei, deoarece lățimea și înălțimea nu sunt date explicit.
adăugat autor Josh Allen, sursa

Plasați acest cod chiar înainte de eticheta de închidere a corpului,

<script  type='text/javascript'>
$(document).ready(function(){
    $(".home").hover(
        function() {$(this).attr("src","images/aboutR.png");},
        function() {$(this).attr("src","images/about.png");
    });
});
</script>

plasați clasa acasă în eticheta img . Terminat. Funcționează perfect.

0
adăugat
Deși funcționează, nu o va accepta până când nu am suficient feedback în ceea ce privește voturile pentru răspunsuri. Mulțumiri
adăugat autor Fahad Uddin, sursa

încercați doar să faceți o răsturnare a imaginii simple? fără a vedea un exemplu de lucru, nu pot explica exact ceea ce încerci să faci, dar rolloversul imaginilor este simplu de făcut cu spritele CSS, nu este nevoie de jQuery și acest lucru face ca site-ul să fie mult mai strălucitor. de asemenea, face ca site-ul dvs. să răspundă mai repede, deoarece imaginile prestabilite și cele de stare superioară sunt aceeași imagine, nu este necesar un cod de preload.

dacă aveți nevoie de o imagine mapată (mai degrabă decât o schimbare completă), aceasta poate fi realizată cu o imagine de fundal, o div divizor și png-24 grafică (javascript necesar pentru a face png-24s să lucreze în IE6, dar care îi pasă de sprijinirea IE6 oricum?).

o modalitate buna de a schimba imaginile navigate fără a recurge la JavaScript este prin utilizarea proprietății de fundal-poziție, cum ar fi:

   //define your container element
    #nav-home {  
         margin: 20px 5px;  
         height: 15px; 
         width: 40px;
          }

   //use a descendant selector to style the  tag
    #nav-home a { 
         background-image: url("/images/buttons-nav.gif"); 
         display: block;//THIS IS VERY IMPORTANT!!
         background-position: 0 0; //the first number is horizontal placement, the second is vertical placement. at 0 0 it is positioned from the top left corner
         height: 15px; 
         }

   //this is where you change the position of the background for the hover state
    #nav-home a:hover { 
         background-position: -20px 0; //this moved it 20px to the right 
         }

și codul dvs. HTML ar arăta astfel:

    <div id="nav-home">home
    <!-- uses a 1px transparent gif to "hold" the place of the actual clicked item -->

your image would actually contain BOTH on and off states, like this: http://www.w3schools.com/css/img_navsprites_hover.gif then all you are doing is moving the image to one side to show the :hover state. (code example at http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav). you are basically making a window with a container div, then only showing a portion of the actual background image.

also, stay away from using :hover on anything but an tag as not all browsers support use of :hover on block level elements.

0
adăugat

După cum sa menționat anterior, nu este nevoie de o soluție JS.

Un alt lucru a fost de a face este prin încărcarea ambelor imagini și ascunzându-le/arătându-le cu: eveniment hover. Ceva de genul:

HTML:

logologo

CSS:

..

.image_off, #home:hover .image_on{
   display:none
}
.image_on, #home:hover .image_off{
   display:block
}
..
0
adăugat
+1 pentru asta. Mulțumiri..
adăugat autor Gaurav Manral, sursa
Acest lucru este frumos. Se poate adăuga acolo lățimea imaginii utilizate, astfel încât hove-ul să fie mai precis!
adăugat autor Valentin Vrinceanu, sursa
adăugat autor user720491, sursa

trebuie să utilizați regula position în timp ce utilizați o regulă z-index . Încercați să adăugați position: relative unde ați folosit z-index .

0
adăugat

Aici este o soluție js/jquery

//should go inside your <head> tag
function onHover()
{
    $("#menuImg").attr('src', 'images/aboutR.png');
}

function offHover()
{
    $("#menuImg").attr('src', 'images/about.png');
}

html:

<div id="menu" >  
  
    logo 
</div>

Iată un exemplu de lucru . Codificare fericită :)

0
adăugat
Mulțumiri! Asta merge frumos.
adăugat autor Onur Senture, sursa

Acest lucru funcționează:

<html>
<head>
<title>Example</title>
</head>
<body>
    <div id="menu">
        logo
    </div>
</body>
</html>

(Numele imaginilor s-au schimbat pentru a-mi ușura realizarea paginii.)

0
adăugat

You're calling logo twice, once in the html and once in the css. I suggest deleting the html and strictly using CSS background image. You don't need the z-index either.

0
adăugat

Eliminați eticheta img și setați lățimea și înălțimea #home (și orice alt element de meniu) la lățimea și înălțimea imaginilor.

De asemenea, setați conținutul la orice ar fi alt al imaginii (pentru scopuri de accesibilitate), apoi setați proprietatea text-indent astfel încât acesta să fie mutat offpage.

În prezent, când treceți, modificați imaginea de fundal, dar eticheta img este pe partea de sus și va fi întotdeauna.

HTML

<div id="menu" >  
  Home
</div>

CSS

#menu{
  margin-left: 353px;
  margin-top: -70px;
  padding-bottom: 16px;
}
#home{
  background:transparent url(images/about.png);
  width: 400px;
  height: 142px;
  z-index:1;
  text-indent: -9999em;
}
#home:hover{
  background:url(images/aboutR.png);
  z-index:2;
}
0
adăugat
Chiar dacă specificăm lățimea și înălțimea, fundalul este afișat doar pentru textul scris în interiorul unei etichete
adăugat autor Fahad Uddin, sursa
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com