kostenloser Webspace werbefrei: lima-city


Rollover Effekt mit CSS

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    artisn

    artisn hat kostenlosen Webspace.

    Hey...also ich hab da son Problem bei CSS...ich hab n Bild, dass soll sich auf mind. die doppelte Größe vergrößern, wenn man da mit der Maus drauf geht.
    Ich bekomm es aber nich hin...*argh*...mit Schriften is das kein Problem und mit einfach Kästchen is das auch nich das Theman nur mit diesem Bild werd ich nich feddich...brauch dringend Hilfe. ^^

    mfg
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. benutzernaemelchen

    Kostenloser Webspace von benutzernaemelchen

    benutzernaemelchen hat kostenlosen Webspace.

    wie meinst du das, verrgößern?
    Da wäre wohl eher JS angebracht, hab ich aber keine Ahung von. Aber erklär mal ein wenig mehr über das Vergrößern ;)
  4. Autor dieses Themas

    artisn

    artisn hat kostenlosen Webspace.

    Ja über JS wäre es einfacher, aber das is ne Aufgabe zu lösen NUR mit CSS...das is n ganz einfaches Rollover.
    Das Thumbnail is: 210px x 107px
    Das Original ist: 520px x 264 px
    Und sobald jemand auf das Thumbnail geht soll das Original aufspringen...NUR mit CSS...ich hab das schon versucht mit einem "Link ohne Ziel" im Prinzip geht das auch...nur das Bild macht ärger...
  5. r*****r


    Ja über JS wäre es einfacher, aber das is ne Aufgabe zu lösen NUR mit CSS...das is n ganz einfaches Rollover.
    Das Thumbnail is: 210px x 107px
    Das Original ist: 520px x 264 px
    Und sobald jemand auf das Thumbnail geht soll das Original aufspringen...NUR mit CSS...ich hab das schon versucht mit einem "Link ohne Ziel" im Prinzip geht das auch...nur das Bild macht ärger...


    mal so ne idee:
    Versuchs doch mal mit dem Bild als intergrundbild, von einem Objekt, das eine Bestime größe hat, evtl. klappts so ja.

    [edit=1]
    so in etwa:
    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    #bild {
    	width:210px;
    	height:107px;
    	background-image:url(gross.gif);
    	background-repeat:no-repeat;
    }
    #bild:hover {
    	width:520px;
    	height:264px;
    	background-image:url(klein.gif);
    	background-repeat:no-repeat;
    }
    </style>
    </head>
    <body>
    <div id="bild"></div>
    </body>
    </html>

    [/edit]

    Beitrag geaendert: 4.3.2007 19:00:18 von ruehrer
  6. Autor dieses Themas

    artisn

    artisn hat kostenlosen Webspace.

    ich versuchs...viellicht klappts so
  7. Autor dieses Themas

    artisn

    artisn hat kostenlosen Webspace.

    herzlichen dank....hat funktioniert...und ich brech mir da voll einen ab...hehe ^^
    naja...meißt is halt der einfachste weg, der beste... ;)
    vielen lieben dank nochma

    mfg
  8. ups hab mist geschrieben sry XD

    naja wusste gar nicht das mit CSS geht o.O
    thx für die Lösung

    Beitrag geaendert: 4.3.2007 19:24:56 von warhiro
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!