ComputerBase Menü
Aktuelles

Bild vergrößern beim Rüberfahren mit der Maus

D

dagobert50gold

Gast
Auch wenn wir alle nach "Wetten, dass..?" unter Schock stehen, habe ich hier ein Problem:

Ich will auf einer Internetseite Bilder vergrößern lassen, wenn man mit der Maus drüberfährt.

Aber nicht so wie bei bundesliga.de, sondern wie bei der RHEINISCHEN POST. Also mit JavaScript und nicht mit Flash.
 
und wo ist dein problem?

weißt du nicht, wie das funktionieren soll oder suchst du eine fertiglösung?
 
Du meinst die Vereinslogos?
 
Ich suche nicht die Logos, sondern die Lösung, wie man allgemein Bilder so vergrößern kann. Eine Komplettlösung. Es müssen keine Vereinslogos sein!
 
google nach "javascript bildergalerie"
 
Bildergalerie bringt nichts, da dort immer obendrüber das gewählte Bild zu sehen ist. Es soll aber nur der "Größer-Kleiner"-Effekt auftreten bei jedem einzelnen Bild.
 
HTML: 
$(document).ready(function() {
    $("#dieteams img")
        .hover(function() {
            $(this).stop().animate({ width:"51px", padding:"0px" }, 200 );
        }, function() {
            $(this).stop().animate({ width:"36px", padding:"6px" }, 200 );
        });
});

Dieser Code sollte die Mannschaffts-Icons auf der Seite der Rheinischen Post vergrößern.
 
Was Du beim MouseOver siehst, ist keine Browserfunktion die man pauschal und über alles nachrüsten kann.

Auf den Webseiten wird mit zwei Bildern und einem eingebettetem JS-Code gearbeitet.

Einmal das kleine Bild das im Textfluß integriert ist und ein zweites, größeres Bild das über JavaScript beim MouseOver nachgeladen wird.


Christine A.
 
Eben nicht. Es gibt ein Bild. Das wird verkleinert gezeigt. Geht man dann drauf, wird es schrittweise auf Originalgröße "gezoomt", also fließend. geht man runter, geht es wieder auf die "kleine" Größe. Wie kriegt man das hin? Das kann auch ruhig eine Zusatzsoftware machen.
 
refLye hat doch den relevanten Code extrahiert.

Hier ein komplettes Beispiel:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>

<script src="http://static.rp-online.de/layout/js/min/jquery-1.3.2.js" 
type="text/javascript"></script>

<style type="text/css">
/*<![CDATA[*/

#pics  {display:inline;}
body   {background:#555;}
.x     {float:left; width:42px; height:38px; 
/*border-width:1px 0 1px 1px; border-style:solid; border-color:silver;*/}
img    {z-index:5;}
/*]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $("#pics img")
        .hover(function() {
            $(this).stop().animate({width:"52px", padding:"0px"}, 150 );
        }, function() {
            $(this).stop().animate({width:"36px", padding:"8px"}, 150 );
        });
});
//]]>
</script>

</head><body><div id="pics">

<div class="x"><a href="https://www.computerbase.de"><img 
src="http://www.bilder-hochladen.net/files/f11h-f.png" style="border:0; 
padding:8px; overflow:hidden; width:36px;" alt="x" title="x" /></a></div>

<div class="x"><a href="https://www.computerbase.de"><img 
src="http://www.bilder-hochladen.net/files/f11h-g.png" style="border:0; 
padding:8px; overflow:hidden; width:36px;" alt="x" title="x" /></a></div>

<div class="x"><a href="https://www.computerbase.de"><img 
src="http://www.bilder-hochladen.net/files/f11h-h.png" style="border:0; 
padding:8px; overflow:hidden; width:36px;" alt="x" title="x" /></a></div>

<div class="x"><a href="https://www.computerbase.de"><img 
src="http://www.bilder-hochladen.net/files/f11h-i.png" style="border:0; 
padding:8px; overflow:hidden; width:36px;" alt="x" title="x" /></a></div>

<div class="x"><a href="https://www.computerbase.de"><img 
src="http://www.bilder-hochladen.net/files/f11h-j.png" style="border:0; 
padding:8px; overflow:hidden; width:36px;" alt="x" title="x" /></a></div>

<div class="x"><a href="https://www.computerbase.de"><img 
src="http://www.bilder-hochladen.net/files/f11h-k.png " style="border:0; 
padding:8px; overflow:hidden; width:36px;" alt="x" title="x" /></a></div>

</div></body></html>

BS
 
Wo hast du denn den Code her?

EDIT: Da brauche ich dann aber den CODE der Rheinischen Post. Und abkupfern will ich nicht so einfach ...

Aber es hat mir zwei Seiten gezeigt:
http://jquery.com/
http://sizzlejs.com/
Das schaue ich mir mal an.

EDIT2: Das hilft mir leider wenig da ich nicht weiß, welches der Scripts ich nehmen muss. Hat jemand noch einen Tipp?
 
Zuletzt bearbeitet:
Das hat doch nichts mit abkupfern zu tun, wenn du es auf eigene Faust machst, wird der Code genau so aussehen!

HTML: 
$(document).ready(function() {       <!-- sobald das Dokument fertig geladen ist -->
    $("#dieteams img")        <!-- sprich alle <img> aus <div id='dieteams'> an -->
        .hover(function() {       <!-- ..bei hover.. -->
            $(this).stop().animate({ width:"51px", padding:"0px" }, 200 ); <!-- beende jede Animation und setze die Breite auf 51px, Geschwindigkeit 200 -->
        }, function() {
            $(this).stop().animate({ width:"36px", padding:"6px" }, 200 );  <!-- Umkehrfunktion, setze Breite auf 36px -->
        });
});
Ist doch relativ einfach zu verstehen oder? Wenn nicht, mail us. ^^
 
Es handelt sich natürlich um eine freie JS-Bibliothek.

Zum besseren Verständnis: Obiger Code - gepackt als Offline-Anwendung
 
Zuletzt bearbeitet:
Oh, danke! Das funktioniert!

Wo hast du das jetzt her?
Klar, von jQuery, aber wie heißt dieses Script?
 
HTML, CSS, JavaScript und PHP sind [u.A.] Klartextformate, also menschen-lesbarer Code.

Woher werd ich denn Code also schon haben?

Make an educated guess :-)
 
Zuletzt bearbeitet:
Du hast aber auch den Code von der Rheinischen Post genommen.
Die .js-Datei. Oder?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

K
Fenster beim rüberfahren im Vordergrund ausmachen
Antworten
1
Aufrufe
954
jan4321
jan4321
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 160 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz