Anzeige

Bild beim überfahren größer

Bild beim überfahren größer | PSD-Tutorials.de

Erstellt von slgraphics, 22.09.2008.

  1. slgraphics

    slgraphics S.L.Graphics

    Dabei seit:
    24.09.2007
    Beiträge:
    26
    Geschlecht:
    männlich
    Ort:
    hinter Osna gleich links ;-)
    Software:
    Photoshop CS3
    Kameratyp:
    Casio EXZ 1000, Nokia N73
    Bild beim überfahren größer
    Hey Leute,

    ich suche ein Script, kann Html,Java oder Css sein, wo wenn ich über das Bild drüber fahre es in den mittelpunkt der Webseite vergößert wird.
    oder zum anklicken damit es größer wird. aber nicht einfach ein bild verlinkt in den ein Popup Fenster.

    MfG

    S.L.Graphics
     
    #1      
  2. canrion

    canrion you can!

    Dabei seit:
    16.01.2007
    Beiträge:
    154
    Geschlecht:
    männlich
    Software:
    Photoshop
    Kameratyp:
    Kodak Easyshare Z710
    Bild beim überfahren größer
    AW: Bild beim überfahren größer

    Such mal nach (Bild-)Hover, wird sicher helfen...
     
    #2      
  3. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Bild beim überfahren größer
    AW: Bild beim überfahren größer

    Mahlzeit,

    habe hier noch einen fertigen Code:
    HTML:
    1.  
    2. [B]CSS:[/B]
    3.  
    4. body {
    5.     width: 100%;
    6.     height: 100%;
    7.     }
    8.  
    9. #body {
    10.     width: 800px;
    11.     margin: 20px auto;
    12.     }
    13.  
    14. #link {
    15.     position: absolute;
    16.     }
    17.    
    18. #link a {
    19.     display: block;
    20.     color: blue;
    21.     font-weight: bold;
    22.     font-size: 12px;
    23.     text-decoration: none;
    24.     }
    25.    
    26. #link a:hover {
    27.     text-decoration: underline;
    28.     }
    29.    
    30. #link a span {
    31.     display: none;
    32.     }
    33. #link a:hover span {
    34.     display: block;
    35.     text-decoration: none;
    36.     position: absolute;
    37.     left: 40; width: 150px;
    38.     padding: 5px; margin:
    39.     4px; z-index: 100;
    40.     color: black;
    41.     background: grey;
    42.     }
    43.  
    44. [B]HTML:[/B]
    45.  
    46. <div id="body">
    47.  
    48.     <div id="link">
    49.         <a href="#">Link<span><img src="bild.jpg" title="bild" /></span></a>
    50.     </div>
    51. </div>
    Hinter jedem Link ist ein Span, bei dem display: none gesetzt wurde.
    Sobald du über den Link hoverst, wird das angezeigt, was direkt hinter dem Link im Span angegeben wurde.

    Schau dir das einfach mal an, probier ein wenig rum.
     
    #3      
  4. slgraphics

    slgraphics S.L.Graphics

    Dabei seit:
    24.09.2007
    Beiträge:
    26
    Geschlecht:
    männlich
    Ort:
    hinter Osna gleich links ;-)
    Software:
    Photoshop CS3
    Kameratyp:
    Casio EXZ 1000, Nokia N73
    Bild beim überfahren größer
    AW: Bild beim überfahren größer

    hey Stb_87,

    erstmal DANKE !

    ich habe jetzt folgendes Problem´:

    schau mal bitte auf folgende Seite U9 Rot Weiss Ahlen - Home , das ist die Fussballseite meines Neffens.
    - oben rechts siehst du das Mannschaftsfoto in klein.
    - wenn du jetzt mit der Maus drüber fährst wird es schön mittig dargestellt
    - leider ist der Text und alles andere noch drüber
    - Kumpel von mir hat FireFox und darin wirds richtig angezeigt, die meisten nutzen aber IE .

    Was kann ich jetzt machen, damit das im Vordergrund kommt wenn man übers Bild fährt.

    Hoffe da kann man mir weiter helfen.:':)':)':)schmoll:


    MfG

    S.L.Graphics
     
    #4      
  5. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Bild beim überfahren größer
    AW: Bild beim überfahren größer

    Setz mal den z-index hoch:

    Code (Text):
    1. #link a:hover span {
    2. display: block;
    3. text-decoration: none;
    4. position: absolute;
    5. top: 120px;
    6. left:-750px;
    7. padding: 5px;
    8. margin:4px;
    9. [B]z-index: 100;[/B]
    10. color: black;
    11. background: grey;
    12. }
     
    #5      
  6. slgraphics

    slgraphics S.L.Graphics

    Dabei seit:
    24.09.2007
    Beiträge:
    26
    Geschlecht:
    männlich
    Ort:
    hinter Osna gleich links ;-)
    Software:
    Photoshop CS3
    Kameratyp:
    Casio EXZ 1000, Nokia N73
    Bild beim überfahren größer
    AW: Bild beim überfahren größer

    bringt nichts , habe sonst auch keine z-werte in dem Design...

    gibts noch andere Tipps...:'(
     
    #6      
  7. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Bild beim überfahren größer
    AW: Bild beim überfahren größer

    Ähm, da ich gestern darüber gestolpert bin: der IE 6 hat einen bekannten Bug mit dem position:absolute;
    Bei mir war es so, dass er das div dann gar nicht dargestellt hat, obwohl im Quelltext vorhanden. Ich habe mir so geholfen, dass ich das div als aller erstes div im body eingebunden habe, dann funktioniert es. Es gibt aber noch Hacks mit denen man das angeblich hinbekommt. Google mal ein bissl...
     
    #7      
  8. slgraphics

    slgraphics S.L.Graphics

    Dabei seit:
    24.09.2007
    Beiträge:
    26
    Geschlecht:
    männlich
    Ort:
    hinter Osna gleich links ;-)
    Software:
    Photoshop CS3
    Kameratyp:
    Casio EXZ 1000, Nokia N73
    Bild beim überfahren größer
    AW: Bild beim überfahren größer

    Hey Top Gun ,

    danke, bloß wer nutzt den Bitte IE6 ?
    Es kommt bald IE8 raus(grottenschlecht) und naja IE7 haben ja die meisten wohl...

    wie sollte das Script dann im body heißen, versteh das nicht ganz. :rolleyes:

    Danke ,

    S.L.Graphics
     
    #8      
  9. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Bild beim überfahren größer
    AW: Bild beim überfahren größer

    IE6 und tiefer sind noch immer auf vielen tausenden Rechner zu finden.
    Verwaltungen, große Firmen bei älteren Menschen welche einfach nur nen Rechner
    zum Briefeschreiben und bissl Kochrezepte im Netz suchen haben etc.

    Überall wo es eben z.B. noch immer keinen Sinn macht Win98 Rechner
    auszutauschen. Dort läuft kein IE7.

    Ich habe sogut wie jeden Browser auf meinem Rechner sogar mehrere Version
    des IE um für jeden Browser anzupassen.
     
    #9      
  10. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Bild beim überfahren größer
    AW: Bild beim überfahren größer

    Das ist doch mal was. Hört man nicht oft das sich einer so darin vertieft. Was ich damit meine das jemand auch an die Leute denkt die mangels Wissen oder Technik nicht jede Seite aufrufen können. Was nütz dir die tollste Seite wenn die Leute die es sehen wollen nicht drauf gehen können. Außerdem sollte eine Webside imer so gebaut sein das auch Leute mit langsamer i-net Verbindung "schnell" surfen können. :)

    Lg DerOtto
     
    #10      
x
×
×
teststefan