(Hilfe) html & css galerie

vedroboy · 24.01.2012

Guten Abend, bin neu im Forum und bin durch Google auf diesen Forum gestoßen.

Also ich bin dabei mir ein ebay Auktions-Design zu machen und hab auch ein code im netz gefunden für ne html galerie die ich auch erstmal stark bearbeitet habe. jetzt gibt es ein Problem wenn ich auf die thumbs (kleine vorschaubilder) drücke dann öffnet sich ein neuer Tab und das bild wird dort geöffnet. Ich jedoch möchte das sich das kleine bild bild nicht öffnet, jedoch weiterhin wenn man mit der maus darüber geht, als groß auf der linken seite angezeigt wird.

Hier der Code zum Screenshot

Code:

<!-- BILDER GALERIE -->
<style type="text/css">
<!--
a.ThumbLink { position:absolute; top:0px; left:0px; text-decoration:none; }
a:link.ThumbLink { text-decoration:none; }
a:active.ThumbLink { text-decoration:none; }
a:visited.ThumbLink { text-decoration:none; }
a:hover.ThumbLink { text-decoration:none; cursor:pointer; }
span.spanthumb { width:70px; height:70px; border:1px outset #000000; text-align:center;  }
span.spanthumb:hover { border:1px solid red; }
a#ThumbLink1:hover div.divbild1 { display:block; }
#divthumb1 { position:absolute; top:0px; left:437px; }
div.divbild1 { display:block; width:400px; height:400px; text-align:left; }
a#ThumbLink2:hover div.divbild2 { display:block; }
#divthumb2 { position:absolute; top:73px; left:437px; }
div.divbild2 { display:none; width:400px; height:400px; background-color:#cccccc; text-align:left; }
a#ThumbLink3:hover div.divbild3 { display:block; }
#divthumb3 { position:absolute; top:149px; left:437px; }
div.divbild3 { display:none; width:400px; height:400px; background-color:#cccccc; text-align:left; }
a#ThumbLink4:hover div.divbild4 { display:block; }
#divthumb4 { position:absolute; top:222px; left:437px; }
div.divbild4 { display:none; width:400px; height:400px; background-color:#cccccc; text-align:left; }

-->
                      </style>
<div style="clear:both;position:relative;display:block;width:550px;height:400px;background-color:#cccccc;margin:5px;margin-left:auto;margin-right:auto;margin-top:10px;">

<!-- Bild Nr. 1 -->
<a href="http://www.abload.de/img/11d2uga.png" target="_blank" id="ThumbLink1" class="ThumbLink">
    <span id="divthumb1" class="spanthumb">
        <img src="http://www.abload.de/img/11d2uga.png" width="70" height="53" alt="" border="0">
    </span>
    <div id="divbild1" class="divbild1">
        <img src="http://www.abload.de/img/11d2uga.png" width="400" height="400" border="0" align="left">
    </div>
</a>
<!-- Bild Nr. 2 -->
<a href="http://www.abload.de/img/126guju.jpg" target="_blank" id="ThumbLink2" class="ThumbLink">
    <span id="divthumb2" class="spanthumb">
        <img src="http://www.abload.de/img/126guju.jpg" width="70" height="53" alt="" border="0">
    </span>
    <div id="divbild2" class="divbild2">
        <img src="http://www.abload.de/img/126guju.jpg" width="400" height="400" alt="" border="0">
    </div>
</a>
<!-- Bild Nr. 3 -->
<a href="http://www.abload.de/img/123kiu2m.jpg" target="_blank" id="ThumbLink3" class="ThumbLink">
    <span id="divthumb3" class="spanthumb">
        <img src="http://www.abload.de/img/123kiu2m.jpg" width="70" height="53" alt="" border="0">
    </span>
    <div id="divbild3" class="divbild3">
        <img src="http://www.abload.de/img/123kiu2m.jpg" width="400" height="400" alt="" border="0">
    </div>
</a>
<!-- Bild Nr. 4 -->
<a href="http://www.abload.de/img/1234mmutb.jpg" target="_blank" id="ThumbLink4" class="ThumbLink">
    <span id="divthumb4" class="spanthumb">
        <img src="http://www.abload.de/img/1234mmutb.jpg" width="70" height="53" alt="" border="0">
    </span>
    <div id="divbild4" class="divbild4">
        <img src="http://www.abload.de/img/1234mmutb.jpg" width="400" height="400" alt="" border="0">
    </div>
</a>
</div>

JuniorChef · 24.01.2012

Sieht eher nach einem JavaScript fehler aus.
Dein HTML Code macht nichts anderes, als auf das Bild zu verlinken.
Durch das target blank wird das Bild dann in einem neuen Tab geöffnet.

Hast du dazu noch eine JS Datei, die du bearbeitet hast?!

vedroboy · 24.01.2012

ne keine java datei. nur das was du da auch vom code siehst, das ist alles was ich habe...

JuniorChef · 24.01.2012

Okay, jetzt seh ich`s.
Der Bildwechsel wird mit hover gemacht.

Ich würde dir da zu einem JS Plugin raten. Die sind wesentlich eleganter und auch einfach zu benutzen:
http://www.1stwebdesigner.com/freebies/javascript-sliders-scrollers/

Wenn du es so machen willst, dann müsstest du die <a> tags durch <div> tags tauschen und die CSS anweisung dementsprächend anpassen.

Oder du löscht den href inhalt und setzt dafür # ein ( href="#" ) und nimmst zusätzlich das target="_blank" raus.

vedroboy · 24.01.2012

das ist doch mal ne gute idee mit der #, bin ich nicht drauf gekommen. Danke dir für deine Tipps