Mit mouseover Bild vergrößern

aleko89 · 9. Oktober 2013

Halli Hallo liebe Leute,

ich bin schon den ganzen Tag am durchdrehen. Ich suche eine bestimmten Befehl um ein Bild zu vergößern (per mouseover). Allerdings handelt es sich dabei um ein schon vorhandenes Bild welche in einem anderen Fenster dann vergößert erscheinen soll.

Ich hab hier einmal ein Beispielt (und bei den Tatto auf dem Nagel)

http://www.ebay.de/itm/25-Stk-…uss-schwarz-/120630878883

ich suche schon die ganze Zeit nach diesem Befehl allerdings erfolglos.

Ich hoffe das hier jemand ist der mit ggf helfen kann

Liebe Grüße

Basi · 16. Januar 2014

Einen Befehl gibt es nicht direkt, du kannst jedoch ein einfaches JavaScript geschickt mit CSS kombinieren, hier mal ein Ansatz:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Titel</title>
  <style>
body, div { margin: 0; padding: 0; }




div.small {
  width: 100px;
  height: 100px;
  background: #CACC00;
}




div.expander {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #3533FF;
  color: white;
  display: none;
}
  </style>
  <script>
  function showExpander(element, e){
    element.childNodes[1].style.display="block";
    element.childNodes[1].style.top=e.clientY+1+"px";
    element.childNodes[1].style.left=e.clientX+1+"px";
  }




  function moveExpander(element, e){
    element.childNodes[1].style.display="block";
    element.childNodes[1].style.top=e.clientY+1+"px";
    element.childNodes[1].style.left=e.clientX+1+"px";
  }




  function hideExpander(element){
    element.childNodes[1].style.display="none";
  }
  </script>
</head>
<body>
  <div class="small" onmouseover="showExpander(this, event)" onmousemove="moveExpander(this, event)" onmouseout="hideExpander(this)">
    Normale Anzeige
    <div class="expander">Erweiterte Anzeige</div>
  </div>
</body>
</html>

Alles anzeigen

Mit mouseover Bild vergrößern

Jetzt mitmachen!

Teilen