Slider statt Einzelbild darstellen

Internet
1

Hallo Zusammen!

In einer Tabelle zeige ich in einer Spalte mittels „mouseover“ ein Bild.

Was muß ich verändern, um an gleicher Stelle eine Slide-Show zu zeigen.

HTML:

CSS:

#data tr td div div { position:absolute; height:400px; width:400px; background-position:-400px; color:magenta; font-size:18px; font-weight:bolder; text-align:center; margin:0px 202px; top:140px;}

div .hoveref0001 {background: url(…/picture/ccgri200401t.jpg);}

Vielen Dank im Voraus

MfG
meilott

1
2004
Griechenland
Olymp. Spiele Athen
Panagiotis Gravvalos
Konstantinos Kazakos
2

Hi, dazu musst du zuerst einen „slider“ einbauen und die dazugehörigen CSS Klassen und z. B. JQuery Skripte auf deine Homepage laden. gibt es aber auch in purem CSS

http://cssslider.com/de/

Recht bekannt ist auch http://wowslider.com/de/css-slider-aqua-flip-demo.html

Hier ist eine gute Anleitung für den Einstieg: http://www.drweb.de/magazin/pures-css3-ein-schicker-content-slider-ganz-ohne-javascript/

3

Hallo Kai_663310,

vielen Dank für die Beispiele.

Jedoch lösen die nicht mein Problem.

Bei der Fragestellung ist mir ein Fehler unterlaufen, deshalb stelle ich mein Problem nochmal dar.

In einer Tabelle zeige ich mittels „mouseover“ Einzelbilder.
In jeder Zeile wird ein anderes Bild gezeigt.

HTML:

<! Daten 1>

    <tr>
          <td rowspan="2"><div class="innerDiv6">1</div></td>
           <td rowspan="2"><div class="innerDiv2">2004</div></td>
           <td rowspan="2"><div class="innerDiv">Griechenland</div></td>
          <td rowspan="2"><div class="innerDiv7" onmouseover="this.innerHTML='<div >class=hoveref0001>Olymp. Spiele Athen</div>'"
   onmouseout="this.innerHTML='Olymp. Spiele Athen'">Olymp. Spiele Athen</div></td>
           <td><div class="innerDiv7">Panagiotis Gravvalos</div></td>
          <td rowspan="2"><div class="innerDiv8"></div></td>
   </tr>
   <tr>
           <td><div class="innerDiv7">Konstantinos Kazakos</div></td>
    </tr>

CSS:

#data tr td div div { position:absolute; height:400px; width:400px; background-position:-400px; color:magenta; font-size:18px; font-weight:bolder; text-align:center; margin:0px 202px; top:140px;}

div .hoveref0001 {background: url(…/picture/ccgri200401t.jpg);}

Was muß ich am „mouseover“-Aufruf verändern, um eine Slideshow zu starten.

Es geht also nicht um die Erstellung einer Slideshow, sondern um deren Darstellung.

Vielen Dank im voraus
MfG
meilott

4

Ich habe das schon verstanden :smile:
DIe Antwort bleibt gleich!

Es gibt keine Slideshow per mousover oder ähnlich … dazu muss man CSS-Classen definieren und in seinen Quellcode einbinden, oft kombiniert mit JQuery oder JAVA und dann entsprechend mit seinem Bild verknüpfen.

Wie das geht steht in den Links die ich Dir geschickt hatte.

Du kannst natürlich das Bild, was Du per mousover veränderst als GIF einbinden.
Ein GIF, jedoch in sehr bescheidener Qualität, kann dann einen Slideshow-Effekt erzeugen.