• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

mouseover

M

mjpythons

Neues Mitglied
Guten Morgen

Ich möchte da mal wieder was neues.
Und zwar möchte ich eine Tabelle erstellen siehe unten.

tabelle.jpg

Der Kniff bei der ganzen Sache ist,wenn man rechts mit der Maus über die kleinen Bilder fährt soll das Bild etwas größer werden,aber skalliert auf eine bestimmte Größe so das es sauber und Scharf angezeigt wird.
Mit dem Mousovereffect habe ich mich schon auseinander gesetzt http://www.mjpythons.de/bilder/test.html aber das in eine Tabelle zu packen und rechts darunter den Text,das habe ich leider nicht geschafft,kann mir da vieleicht einer etwas helfen bitte?


Habe den Mouseover so gemacht.

HTML: 
<html>
<head>
<style type="text/css">
    .bild{width:50px;}
    .bild:hover{width:200px;}
</style>
</head>
<body>
<img src="http://www.abload.de/img/tabellex68hr.jpg" class="bild"/>
</body>
</html>

Würde mich über jede Hilfe sehr freuen.

mfg
 
Du musst nur die Bild-Element in die Tabellenzellen stecken und die CSS-Angaben wie in deinem kleinen Beispiel definieren.
 
hi

Danke für deine Antwort,höhrt sich leicht an für jemand der viel Ahnung davon hat.
Ich habe da leider wenig bis garkeine Ahnung von,alles was ich weiß oder kann muss ich mir erklären lassen oder bei google suchen :D
Ich schaffe es ohne hilfe nicht :sad:
 
Hier kommt eine Beispielgalerie, habe nur 4 Bilder von Wikipedia genommen, 2 sind leer, damit du siehst wo du deine Bilder eintragen musst.

Die Galerie ist im gleichnamigen DIV, also nur dieser Teil ist interessant für dich:

HTML: 
<!DOCTYPE HTML>
<html>
<head>
   <meta charset=UTF-8>
   <title>Fotogalerie</title>
   <meta name="description" content="">
   <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
   
    
 <style type="text/css">
    #galerie {width:650px; position:relative;}
    #galerie .default {position:absolute; left:89px; top:53px; border:1px solid #888; z-index:-1;}
    #galerie ul {list-style:none; padding:0; margin:0; width:180px; float:right;}
    #galerie ul li {display:inline; width:60px; height:60px; float:left;}
    #galerie ul li a {display:block; width:50px; height:50px; text-decoration:none; padding:4px; border:1px solid #fff;}
    #galerie ul li a img {width:50px; height:50px; border:0;}
    #galerie ul li a b {position:absolute; left:-9999px; display:block; width:470px; height:360px; background:#fff;}
    #galerie ul li a:hover,
    #galerie ul li a:active,
    #galerie ul li a:focus {white-space:normal; border-color:#000; outline:0;}
    #galerie ul li a:hover b {position:absolute; left:0; top:5px; z-index:100;}
    #galerie ul li a:active b,
    #galerie ul li a:focus b {position:absolute; left:0; top:5px;}
    #galerie ul li a b i {display:block; width:570px; height:360px; text-align:center; display:table-cell; vertical-align:middle;}
    #galerie ul li a b i img {width:auto; height:auto; border:4px solid #888;}
 </style>


 <body>
    <div id=header> 
        <h2>Foto Galerie</h2>
    </div>
    <div id="galerie">
    <ul>
    <li><a href="#x"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Ponte_St._Angelo.jpg/220px-Ponte_St._Angelo.jpg" alt="" /><b><span></span><i><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Ponte_St._Angelo.jpg/220px-Ponte_St._Angelo.jpg" alt="" /></i></b></a></li>
    <li><a href="#x"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Trier-Römerbrücke.01.jpg/220px-Trier-Römerbrücke.01.jpg" alt="" /><b><span></span><i><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Trier-Römerbrücke.01.jpg/220px-Trier-Römerbrücke.01.jpg" alt="" /></i></b></a></li>
    <li><a href="#x"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Ponte_Cestio%2C_Rome%2C_Italy._Pic_04.jpg/220px-Ponte_Cestio%2C_Rome%2C_Italy._Pic_04.jpg" alt="" /><b><span></span><i><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Ponte_Cestio%2C_Rome%2C_Italy._Pic_04.jpg/220px-Ponte_Cestio%2C_Rome%2C_Italy._Pic_04.jpg" alt="" /></i></b></a></li>
    <li><a href="#x"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Pont_Julien%2C_Apt%2C_Vaucluse%2C_France._Pic_03.jpg/220px-Pont_Julien%2C_Apt%2C_Vaucluse%2C_France._Pic_03.jpg" alt="" /><b><span></span><i><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Pont_Julien%2C_Apt%2C_Vaucluse%2C_France._Pic_03.jpg/220px-Pont_Julien%2C_Apt%2C_Vaucluse%2C_France._Pic_03.jpg" alt="" /></i></b></a></li>
    
    <li><a href="#x"><img src="Bild5.jpg" alt="" /><b><span></span><i><img src="Bild5.jpg" alt="" /></i></b></a></li>
    <li><a href="#x"><img src="Bild6.jpg" alt="" /><b><span></span><i><img src="Bild6.jpg" alt="" /></i></b></a></li>
    </ul>
    </div>
</body>
</html>
 
Hallo

Das ist ja schon mal sehr sehr geil,danke für deine Mühen.
Aber wie bekomme ich das jetzt so in eine Tabelle das es so aussieht wie in meinem Beispiel.
Und ist es auch möglich das schon ein Bild von den kleinen im großen links angezeigt wird?,weil so ein leeres Feld finde ich unschön.
Tut mir leid ich weiß das hätte ich vorhinne schon sagen können.

mfg und 1000 Dank
 
Der Kniff bei der ganzen Sache ist,wenn man rechts mit der Maus über die kleinen Bilder fährt soll das Bild etwas größer werden,aber skalliert auf eine bestimmte Größe so das es sauber und Scharf angezeigt wird.
Zum Vergrößern anklicken....

Mein Beispiel macht genau das. Hast du es mal ausprobiert, der Code ist komplett, demnach brauchst den nur in eine leere Seite hinein kopieren.

Aber wie bekomme ich das jetzt so in eine Tabelle das es so aussieht wie in meinem Beispiel.
Zum Vergrößern anklicken....
Wozu Tabelle, sieht doch genau so aus wie von dir gewünscht.

Und ist es auch möglich das schon ein Bild von den kleinen im großen links angezeigt wird?,weil so ein leeres Feld finde ich unschön.
Zum Vergrößern anklicken....
Da sind doch sogar 4 Beispielbilder drin. Bring mich doch nicht schon am frühen Sonntagmorgen zur Verzweiflung :twisted:
Du musst doch nur die Bilder gegen deine Austauschen. Nimm mal den Code und teste ihn erst mal bevor du dich beschwerst.
 
Mahlzeit zusammen

Ich wollte dich doch nicht zur veruweiflung bringen und schon garnicht am Sonntag :oops: :mrgreen:
Ich werde mich hüten mich zu beschweren,ganz im Gegenteil ich mir dir wirklich sehr dankbar das du mir hilfst :-o

In eine Tabelle so wie in meine Grafik soll es weil ich davon auf einer Seite mehrere machen möchte(unter einander)

mfg Marco
 
Dann kopiere den Code und füge ihn in ein weiteres DIV-Element ein. Funktioniert auch mit mehreren Galerien, aber dazu müsste man schon verstehen wie HTML und vor allem CSS zusammenarbeiten und wie sich die Selektoren verhalten.
Dringender Lesetipp:
Selectors Level 3

Bzw. mit Google nach CSS Selektoren suchen
 
Hi

Das mit der Tabelle hat nicht so funktioniert wie gedacht :-)
Ich glaube ich lass es dann auch mit Tabelle zumindest vorerst.

Was ich aber noch gerne machen würde wäre der Abstand von den kleinen Bilder zum Großen Bild um die hälfte verringern.
Und die kleinen Bilder so groß machen das sie in der Gesamtansicht so groß wie das große Bild sind.

Habe schon mit den Zahlen im Code rumgespielt aber ich zerschiesse immer das ganze.

Habe es bis jetzt so
1.0 High Contrast Albino

Was muss ich verstellen um das gewünschte zu erzielen ?

mfg
 
Wenn du nun die id's durch klassen ersetzt dann kannst du auch
das ganze div gallery mehrmals benützen und es funktioniert immer
noch einwandfrei.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben