Bild bei Mouseover größer anzeigen

www.affiliates.de » Affiliate.de Café » Bild bei Mouseover größer anzeigen..

Auf Beitrag antworten Letzte Beiträge Alle Foren als gelesen markieren

  • David Feige Mitglied seit: 22.04.2006
    Beiträge: 238
    Antworten mit Zitat Beitrag Verfasst am: 02.08.2007, 00:24
    Hat evtl. wer einen Code für mich...

    Also ich habe viele kleine Bilder auf einer Seite und möchte das wenn man mit der Maus drüber fährt das dann das selbe Bild nur halt in groß angezeigt wird, am besten noch mit einer 1Pixel großen, schwarzen umrundung bzw. kante.

    Würde mich freuen wenn mir einer dabei helfen kann! Danke

    _________________
    Rettet die Wälder- Esst mehr Biber

    Profile Private Nachricht

  • David Feige Mitglied seit: 22.04.2006
    Beiträge: 238
    Antworten mit Zitat Beitrag Verfasst am: 02.08.2007, 01:17
    Also eine halbe lösung hab ich gefunden:

    <script type="text/javascript">

    /*
    Simple Image Trail script- By JavaScriptKit.com
    Visit http://www.javascriptkit.com for this script and more
    This notice must stay intact
    */

    var trailimage=["bilder/1-2-3.jpg", 598, 254] //image path, plus width and height
    var offsetfrommouse=[10,-20] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
    var displayduration=0 //duration in seconds image should remain visible. 0 for always.

    if (document.getElementById || document.all)
    document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>')

    function gettrailobj(){
    if (document.getElementById)
    return document.getElementById("trailimageid").style
    else if (document.all)
    return document.all.trailimagid.style
    }

    function truebody(){
    return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    function hidetrail(){
    gettrailobj().visibility="hidden"
    document.onmousemove=""

    }

    function followmouse(e){
    var xcoord=offsetfrommouse[0]
    var ycoord=offsetfrommouse[1]
    if (typeof e != "undefined"){
    xcoord+=e.pageX
    ycoord+=e.pageY
    }
    else if (typeof window.event !="undefined"){
    xcoord+=truebody().scrollLeft+event.clientX
    ycoord+=truebody().scrollTop+event.clientY
    }
    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
    var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
    if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)
    gettrailobj().display="none"
    else
    gettrailobj().display=""
    gettrailobj().left=xcoord+"px"
    gettrailobj().top=ycoord+"px"
    }

    document.onmousemove=followmouse

    if (displayduration>0)
    setTimeout("hidetrail()", displayduration*1000)

    </script>




    nur wie mach ich es jetzt das wenn ich über nen bild gehe es aktiviert wird und wenn man runter geht es deaktiviert wird? und das ich die Grafik die aufgerufen werden soll mit angeben kann? z.B das ich es so aufrufen kann?


    <
    img src="bilder/1-2-3.jpg" width="598" height="254"
    onmouseover="showtrail('http://blub.com/15820-b.jpg ','Text',430,393)"
    onmouseout="hidetrail()"
    />



    ( hab ich jetzt bei template monster gefunden, nur bei mir kommt immer die fehlermeldung "fehlt objekt" )

    _________________
    Rettet die Wälder- Esst mehr Biber

    Profile Private Nachricht

  • Hanno_Muehlbrandt Mitglied seit: 23.09.2005
    Beiträge: 268
    Antworten mit Zitat Beitrag Verfasst am: 02.08.2007, 10:41
    Hallo David,
    das geht auch mit CSS (Problem könnte bloß der IE sein, da hier :hover nicht auf alles anwendbar ist). Musst du sehen ob das für dich geeignet ist, da sich Dinge verschieben könnten:

    Code:

    img { height: y%; width: x%; }
    img:hover { height y%; width: x%; border: 1px solid #000000; }


    Viele Grüße
    Hanno

    _________________
    Ich liebe es wenn ein Plan funktioniert

    Profile Private Nachricht ICQ


Auf Beitrag antworten

Forum Information

Sie können keine Beiträge in dieses Forum schreiben.
Sie können auf Beiträge in diesem Forum nicht antworten.
Sie können Ihre Beiträge in diesem Forum nicht bearbeiten.
Sie können Ihre Beiträge in diesem Forum nicht löschen.
Sie können an Umfragen in diesem Forum nicht mitmachen.

Ähnliche Beiträge