Probleme mit Diashow (CSS über Bild in Tabelle)

Terminierer · 05.04.2010

Hallo Zusammen,

bin neu hier und habe auch nicht sehr viel Ahnung in Bezug auf HTML/CSS und möchte mich aber trotzdem an folgendes heranwagen:

Ich möchte eine Art Diashow erstellen, welche wie folgt laufen sollte:
Ich habe ein Foto in einer Tabellenzelle drin, möchte hier rechts (und evtl. links) je einen Pfeil drüberlegen der anklickbar ist. Beim Klick soll nur das Bild getauscht werden.
Geht das überhaupt? Brauche ich da Javascript, Flash oder ähnliches?

Viele Dank vorab für Eure Hilfe
Gruß
Chris

KennyGamer · 05.04.2010

AW: Probleme mit Diashow (CSS über Bild in Tabelle)

ich würde schätzen du brauchst dazu javascript.
selbst bei einem cooldownmenue ist java von nöten.
wie das dann genau geht weiß ich leider nicht vielleicht mal googlen.
oder warten bis wer onkommt der dir helfen kann.

Terminierer · 05.04.2010

AW: Probleme mit Diashow (CSS über Bild in Tabelle)

Dachte ich mir schon halb, wer weiß, vielleicht hat jemand doch noch eine super einfache Lösung - ich google mal mit deinen Vorschlägen weiter....!

Danke dir auf alle Fälle für die Antwort!!!!!

KennyGamer · 05.04.2010

AW: Probleme mit Diashow (CSS über Bild in Tabelle)

ein bisschen googlen hilft eig :
hier mal paar sachen die dich vllt intressieren :

Cut & Paste BackBox Image Viewer
Cut & Paste Photo Slider
WebDesign - Tips und Tricks: JavaScript-Diashow

Mew · 05.04.2010

AW: Probleme mit Diashow (CSS über Bild in Tabelle)

Das ist vielleicht nicht ganz das was du suchst, sollte aber auch helfen

VIelleicht gefällt dir das ja auch so

Terminierer · 05.04.2010

AW: Probleme mit Diashow (CSS über Bild in Tabelle)

Hey Ihr Zwei,

super, ich habe jetzt erstmal von KennyGamer die dritte Variante ausprobiert (Photoslider) und bei mir alles soweit angepasst. Einziges Problem habe ich noch, das ich mit div auf das Bild einen Pfeil gelegt habe anstatt dem normalen Weiter und jetzt wird der Mauspfeil anstatt zur Hand zum Textpfeil oder wie man das nennt (das senkrechte Teil mit oben und unten ein Querstrich;-)). WEnn das dann eine Hand wäre, dann wäre es perfekt. Habt Ihr da ne Idee?:uhm:

@Mew:
Dein Tipp ist auch super, das werde ich jetzt gleich mal bei mir umsetzen - das mit den thumbnails würde nämlich das ganze noch toppen, wenn man diese dann auch noch kombinieren kann und beliebig einsetzen wäre super;-)

Ein Riesendankeschön an Euch zwei!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

KennyGamer · 05.04.2010

AW: Probleme mit Diashow (CSS über Bild in Tabelle)

idee wäre gut wenn du mal die div container etc postet als code.
oder uns mal die website schickst.
am besten wäre beides!

Terminierer · 05.04.2010

AW: Probleme mit Diashow (CSS über Bild in Tabelle)

Hallo, also die Html sieht wie folgt aus, habe im IE das mit der Hand hinbekommen, aber im Firefox gehts noch nicht. dann bin ich grad an der anderen Slideshow dran, da bekomme ich die Thumbnails nicht vertikal:

HTML:

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css" media="screen"><!--
#Rechts { background-image: url(Bilder/Weiter.gif); height: 25px; width: 25px; left: 610px; top: 222px; position: absolute; visibility: visible; cursor:hand; }
--></style>

<script language="JavaScript1.1">
var photos=new Array()
var which=0

photos[0]="Bilder/Planung/Offen_1/1_gross.jpg"
photos[1]="Bilder/Planung/Offen_1/2_gross.jpg"
photos[2]="Bilder/Planung/Offen_1/3_gross.jpg"
photos[3]="Bilder/Planung/Offen_1/4_gross.jpg"
photos[4]="Bilder/Planung/Offen_1/5_gross.jpg"
photos[5]="Bilder/Planung/Offen_1/6_gross.jpg"

function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='Das waren alle Bilder'
}
</script>

        <script type="text/javascript">
        <!--
        function newImage(arg) {
        if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
        } }
        function changeImages() {
        if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        } } } // -->
        </script>
        <script type="text/javascript">
        <!--
        var preloadFlag = false;
        function preloadImages() {
        if (document.images) {
        over_Quadrat_weiss = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        down_Quadrat_weiss = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        over_Quadrat_weiss2 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        down_Quadrat_weiss2 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        over_Quadrat_weiss3 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        down_Quadrat_weiss3 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');                
        over_Quadrat_weiss4 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        down_Quadrat_weiss4 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        over_Quadrat_weiss5 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        down_Quadrat_weiss5 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');        
        over_Quadrat_weiss6 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        down_Quadrat_weiss6 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');        
        preloadFlag = true;
        } } // -->
        </script>
        <csscriptdict>
            <script type="text/javascript"><!--
function newImage(arg) {
    if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
    }
}
function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
    }
}

// --></script>
        </csscriptdict>
        <csactiondict>
            <script type="text/javascript"><!--
var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        over_Quadrat_weiss = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        down_Quadrat_weiss = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        over_Quadrat_weiss2 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        down_Quadrat_weiss2 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        over_Quadrat_weiss3 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        down_Quadrat_weiss3 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');                
        over_Quadrat_weiss4 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        down_Quadrat_weiss4 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        over_Quadrat_weiss5 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        down_Quadrat_weiss5 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');        
        over_Quadrat_weiss6 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');
        down_Quadrat_weiss6 = newImage(/*URL*/'Bilder/Quadrat_gruen.gif');        
        preloadFlag = true;
    }
}

// --></script>
        </csactiondict>
    </head>

    <body onload="preloadImages();" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
        <table width="636" border="0" cellspacing="0" cellpadding="0">
            <tr height="80">
                <td width="12"><img src="Bilder/spacer.gif" height="80" width="12"></td>
                <td colspan="17"></td>
            </tr>
            <tr height="30">
                <td></td>
                <td colspan="17" class="p4"><b>text</b></td>
            </tr>
            <tr valign="top">
                <td></td>
                <td colspan="17"><img src="Bilder/Planung/Offen_1/1_gross.jpg" width="624" height="249" name="photoslider">
                    <div id="Rechts" onClick="forward()"></div>
                </td>
            </tr>
            <tr height="7">
                <td colspan="18"></td>
            </tr>
        </table>
        <table width="636" border="0" cellspacing="0" cellpadding="0">
            <tr height="14">
                <td width="12"></td>
                <td><img src="Bilder/Quadrat_gruen.gif"></td>
                <td width="7"><img src="Bilder/spacer.gif" width="7"></td>                
                <td><a onmousedown="changeImages( /*CMP*/'Quadrat_weiss',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseup="changeImages( /*CMP*/'Quadrat_weiss',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseover="changeImages( /*CMP*/'Quadrat_weiss',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseout="changeImages( /*CMP*/'Quadrat_weiss',/*URL*/'Bilder/Quadrat_weiss.gif');return true" href="planung_projekte_privat_2.htm"><img src="Bilder/Quadrat_weiss.gif" name="Quadrat_weiss" border="0"></a></td>
                <td width="7"><img src="Bilder/spacer.gif" width="7"></td>
                <td><a onmousedown="changeImages( /*CMP*/'Quadrat_weiss2',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseup="changeImages( /*CMP*/'Quadrat_weiss2',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseover="changeImages( /*CMP*/'Quadrat_weiss2',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseout="changeImages( /*CMP*/'Quadrat_weiss2',/*URL*/'Bilder/Quadrat_weiss.gif');return true" href="planung_projekte_privat_3.htm"><img src="Bilder/Quadrat_weiss.gif" name="Quadrat_weiss2" border="0"></a></td>
                <td width="7"><img src="Bilder/spacer.gif" width="7"></td>
                <td><a onmousedown="changeImages( /*CMP*/'Quadrat_weiss3',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseup="changeImages( /*CMP*/'Quadrat_weiss3',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseover="changeImages( /*CMP*/'Quadrat_weiss3',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseout="changeImages( /*CMP*/'Quadrat_weiss3',/*URL*/'Bilder/Quadrat_weiss.gif');return true" href="planung_projekte_privat_4.htm"><img src="Bilder/Quadrat_weiss.gif" name="Quadrat_weiss3" border="0"></a></td>
                <td width="7"><img src="Bilder/spacer.gif" width="7"></td>                
                <td><a onmousedown="changeImages( /*CMP*/'Quadrat_weiss4',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseup="changeImages( /*CMP*/'Quadrat_weiss4',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseover="changeImages( /*CMP*/'Quadrat_weiss4',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseout="changeImages( /*CMP*/'Quadrat_weiss4',/*URL*/'Bilder/Quadrat_weiss.gif');return true" href="planung_projekte_privat_5.htm"><img src="Bilder/Quadrat_weiss.gif" name="Quadrat_weiss4" border="0"></a></td>
                <td width="7"><img src="Bilder/spacer.gif" width="7"></td>
                <td><a onmousedown="changeImages( /*CMP*/'Quadrat_weiss5',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseup="changeImages( /*CMP*/'Quadrat_weiss5',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseover="changeImages( /*CMP*/'Quadrat_weiss5',/*URL*/'Bilder/Quadrat_gruen.gif');return true" onmouseout="changeImages( /*CMP*/'Quadrat_weiss5',/*URL*/'Bilder/Quadrat_weiss.gif');return true" href="planung_projekte_privat_6.htm"><img src="Bilder/Quadrat_weiss.gif" name="Quadrat_weiss5" border="0"></a></td>
                <td width="20"><img src="Bilder/spacer.gif" width="20"></td>                
                <td width="30"><p class="p3">1/1</p></td>
                <td colspan="3" align="right" width="400"><img src="Bilder/Pfeil.gif" border="0"></td>
                <td width="60" align="right"><a href="planung_projekte_privat_1_konzept.htm"onclick="javascript:this.blur()">Konzept</a></td>
            </tr>

        </table>

    </body>

</html>

die andere Slideshow habe ich wie folgt ändern wollen, verstehe aber nicht ganz, wo ich die Thumbleiste vertikal stelle:

HTML:

function scrollDivDown(){
  clearTimeout(timer);
  d=document.getElementById('thumbs');  // wo soll gescrollt werden -> thumbs
  d.scrollTop+=scrollStep;
  timer=setTimeout("scrollDivDown()",10); // nach wievielen Millisekunden soll weitergescrollt werden -> 10
}

function scrollDivUp(){
  clearTimeout(timer);
  d=document.getElementById('thumbs');
  d.scrollTop-=scrollStep;
  timer=setTimeout("scrollDivUp()",10);
}

Viele Grüße und DANKE!!!

KennyGamer · 05.04.2010

AW: Probleme mit Diashow (CSS über Bild in Tabelle)

jioar kann ich dir auch gerade nicht sagen aber code einfügen geht wie folgt

Code:

sieht dann so aus und ist auch schöner^^

mit dem browser problem vllt mal bei http://www.css4you.de schauen

mfg kennygamer.

fourmilier · 02.05.2010

AW: Probleme mit Diashow (CSS über Bild in Tabelle)

hallo terminierer
es gibt tolle tipps und Vorlagen für Slideshows und navigation in CSS sowie javascript