tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
2980
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    thehasso thehasso ist offline Mitglied Brokat
    Registriert seit
    Apr 2008
    Beiträge
    345
    Hallo,


    ich bin gerade auf der suche, wie mann ein bild das man auf der Website hat, beim drüber gehen mit der maus größer angezeigt, bekommt. Sprich ich hab einen Online status von Usern, die sich auf meiner Website befinden. Die Bilder sind aber alle im kleinformat. Deswegen ist es sinnvoll dass wenn der user beim Bild drüber geht, das bild etwas größer angezeigt wird.


    Wüsste jemand, wie ich da vor gehen muss?

    Mein start war so:

    PHP-Code:
        <?php $pic htmlentities($searchEntry['bild']);
              
    $intID htmlentities($searchEntry['intID']);
        if(
    $pic == NULL) echo "<a href='/fffk/Templates/nacheinloggen/profil.php?id=$intID' target='mainFrame'> <img src='img/no_image.jpg' width='115' height='125' alt='bild' />"
        else 

    // BILD IN KLEIN
        
    echo " <a href='/fffk/Templates/nacheinloggen/profil.php?id=$intID' target='_blank'><img src='img/$pic' width='115' height='125' alt='pic' />" ?>
        
    // BILD IN GROß
       <? 
       
    echo " <a href='/fffk/Templates/nacheinloggen/profil.php?id=$intID' target='_blank'><img src='img/$pic' width='200' height='300' alt='pic' />"
       
    ?>
    Brauche nur etwas, was durch den drüber geht, das Bild in groß anzeigt.



    LG
     

  2. #2
    Avatar von SCIPIO-AEMILIANUS
    SCIPIO-AEMILIANUS SCIPIO-AEMILIANUS ist offline aka DonMahallem
    Registriert seit
    Mar 2007
    Ort
    Saxonburg(Pa)
    Beiträge
    375
    Du machst das mit Javascript, oder mit CSS.
    Bei Javascript arbeitest du mit dem onmouseover und onmouseout Event und bei CSS mit hover. Beides geht.
    Javascript Beispiel:
    HTML-Code:
    <html>
    <head>
    <script type="text/javascript" language="javascript">
    function large(el,num)
    {
    if(num==1){
    el.style.width="600px";
    }
    if(num==0){
    el.style.width="200px";
    }
    }
    </script>
    </head>
    <body>
    <img src="bild1.jpg" onmouseover="large(this,1);" onmouseout="large(this,0);"/>
    </body>
    </html>
    Oder mit CSS:
    HTML-Code:
    <html>
    <head>
    <style type="text/css">
    	.bild{width:50px;}
    	.bild:hover{width:200px;}
    </style>
    </head>
    <body>
    <img src="bild1.jpg" class="bild"/>
    </body>
    </html>
    Geändert von SCIPIO-AEMILIANUS (04.04.09 um 11:19 Uhr)
     
    MFG Scipio
    Ein Danke für hilfreiche Antworten ist gern gesehen.

  3. #3
    Maik Tutorials.de Gastzugang
    Hi,

    da dein Vorhaben mit einer serverseitigen Scriptsprache wie PHP technisch nicht möglich ist, bring ich den Thread im Javascript-Forum unter, denn dieser "Event" läuft, wie von Scipio skizziert, clientseitig ab.

    mfg Maik
     

  4. #4
    thehasso thehasso ist offline Mitglied Brokat
    Registriert seit
    Apr 2008
    Beiträge
    345
    oki danke dir habs mit dem css realisiert...
     

  5. #5
    peper peper ist offline Mitglied Gold
    Registriert seit
    Dec 2006
    Beiträge
    175
    Hallo Liebe Community,

    ich würde gerne das in Javascript verwenden aber statt das Bild einfach zu strecken würde ich gerne das Originalbild anzeigen.
    geht das auch irgendwie mit Javascript den Pfad habe ich das ist kein Problem.

    LG Peper
    Geändert von peper (20.07.09 um 22:02 Uhr)
     

Ähnliche Themen

  1. Antworten: 2
    Letzter Beitrag: 01.01.09, 14:37
  2. grosses Bild erscheint über dem kleinen per Maus
    Von Brauni im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 15.04.07, 23:37
  3. Bild Über eine Tabellenrand anzeigen
    Von MrFreeze im Forum HTML & XHTML
    Antworten: 3
    Letzter Beitrag: 10.08.06, 12:53
  4. Javascript nur über einem Bild anzeigen
    Von sebastianv im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 08.05.06, 12:12
  5. Maus Zeiger über Bild
    Von wavetraxx im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 16.02.05, 13:46