# Bilder per Button anzeigen lassen



## at0x (26. August 2009)

Hi, meld mich mal wieder auf meinen Post zurück...

Bin immer noch dabei.
Nun habe ich das so gemacht, dass ich via Buttons, mir andere Bilder anzeigen lassen kann. Gut, nicht sonderlich schwer werdet ihr denken.

Aber ich will das anders machen. Das eine feste Grafik eingebunden ist und dann via Button die CSS Icons auf dem Bild liegen...aber irgendwie hängt da der Wurm...

So sieht es zur Zeit aus...
Nur denke ich , dass die Arrays für die Bilder, die zur Zeit angezeigt werden, durch die CSS-Icons ersetzt werden müssen oder nicht?



<html>
    <head><body>
        <title>Bilder</title>
        <link rel="stylesheet" href="Style.css" type="text/css">
        <script type="text/javascript">
            <!--
            var z = 0;

            var Bild = new Array();
            Bild[0] = "<img src=\"200001.jpg\" width=\"437px\" height=\"358px\" border=\"0\">";
            Bild[1] = "<img src=\"200002.jpg\" width=\"437px\" height=\"358px\" border=\"0\">";<style type="text/css">

            function Vor() 
            {
                if(z < Bild.length-1)
                    z += 1;
                document.getElementById("bild").innerHTML = Bild[z];
                document.getElementById("zaehler").innerHTML = "Bild "+(z+1)+" von "+Bild.length;
            }
            function Zurueck()
            {
                if (z > 0)
                    z-= 1;
                document.getElementById("bild").innerHTML = Bild[z];
                document.getElementById("zaehler").innerHTML = "Bild "+(z+1)+" von "+Bild.length;
            }
            //-->
        </script>
    </head>
    <body OnLoad="Zurueck();">
        <div align="center">
            <input type="Button" name="rwd" value="<--" OnClick="Zurueck();">
            <input type="Button" name="fwd" value="-->" OnClick="Vor();">
            <span id="zaehler"></span>
            <div id="bild"></div>
        </div>
    </body>
</html>


----------



## Maik (26. August 2009)

Moin,

der Wurm steckt hier, der in der Fehlerkonsole des Browsers aber auch einen Syntax-Fehler auswirft:

```
Bild[1] = "<img src=\"200002.jpg\" width=\"437px\" height=\"358px\" border=\"0\">";<style type="text/css">
```


mfg Maik


----------



## at0x (26. August 2009)

<html>
    <head><body>
        <title>Bilder</title>
        <link rel="stylesheet" href="Style.css" type="text/css">
        <script type="text/javascript">
            <!--
            var z = 0;

            var Bild = new Array();
            Bild[0] = "<img src=\"200001.jpg\" alt=\"2\" width=\"437px\" height=\"358px\" border=\"0\">";
            Bild[1] = "<img src=\"200002.jpg\" alt=\"2\" width=\"437px\" height=\"358px\" border=\"0\">";



            function Vor() 
            {
                if(z < Bild.length-1)
                    z += 1;
                document.getElementById("bild").innerHTML = Bild[z];
                document.getElementById("zaehler").innerHTML = "Bild "+(z+1)+" von "+Bild.length;
            }
            function Zurueck()
            {
                if (z > 0)
                    z-= 1;
                document.getElementById("bild").innerHTML = Bild[z];
                document.getElementById("zaehler").innerHTML = "Bild "+(z+1)+" von "+Bild.length;
            }
            //-->
        </script>
    </head>
    <body OnLoad="Zurueck();">
        <div align="center">
            <input type="Button" name="rwd" value="<--" OnClick="Zurueck();">
            <input type="Button" name="fwd" value="-->" OnClick="Vor();">
            <span id="zaehler"></span>
            <div id="bild"></div>
        </div>
    </body>
</html>


Jetzt müsste es wieder gehen


----------



## Maik (26. August 2009)

Jo 

mfg Maik


----------



## at0x (26. August 2009)

Kein Ding, hm die Frage ist nur, wie das geht...Ich hab keinen blassen schimmer


----------



## Maik (26. August 2009)

Vielleicht hilft dir hier dieses Ausgangsbeispiel weiter?

```
<html>
<head><body>
<title>Bilder</title>
<link rel="stylesheet" href="Style.css" type="text/css">
<script type="text/javascript">
<!--
var z = 0;

var Bild = new Array();
Bild[0] = "<img src=\"200001.jpg\" alt=\"2\" width=\"437px\" height=\"358px\" border=\"0\">";
Bild[1] = "<img src=\"200002.jpg\" alt=\"2\" width=\"437px\" height=\"358px\" border=\"0\">";



function Vor()
{
if(z < Bild.length-1)
z += 1;
document.getElementById("bild").innerHTML = Bild[z];
document.getElementById("zaehler").innerHTML = "Bild "+(z+1)+" von "+Bild.length;
}
function Zurueck()
{
if (z > 0)
z-= 1;
document.getElementById("bild").innerHTML = Bild[z];
document.getElementById("zaehler").innerHTML = "Bild "+(z+1)+" von "+Bild.length;
}
//-->
</script>
<style type="text/css">
<!--
#wrapper {
width:800px;
height:600px;
margin:auto;
position:relative;
}
#wrapper #card {
position:absolute;
}
#wrapper form, #wrapper #zaehler, #wrapper #bild {
position:relative;
z-index:2;
}
#wrapper form {
width:115px;
margin:auto;
}
#wrapper #bild {
left:100px;
top:50px;
}
-->
</style>
</head>
<body onload="Zurueck();">
<div id="wrapper">
     <img id="card" src="pfad/zu/card.jpg" width="800" height="600" alt="">
     <form>
           <input type="Button" name="rwd" value="<--" OnClick="Zurueck();">
           <input type="Button" name="fwd" value="-->" OnClick="Vor();">
          <div id="zaehler"></div>
     </form>  
     <div id="bild"></div>
</div>
</body>
</html>
```


mfg Maik


----------



## at0x (26. August 2009)

Hey danke Maik. Das hat mir schon mal geholfen.
Hm, eigentlich kann ich doch die Bilder die ich habe nun via CSS durch eigene Icons ersetzen oder nicht? 
Ich will mittels Button eine feste CSS-Absolute wechseln lassen...Das die erste ausgeblendet wird und dann die zweite eingeblendet wird

So sieht es gerade aus..


```
<html>
<head><body>
<title>Bilder</title>
<link rel="stylesheet" href="Style.css" type="text/css">
<script type="text/javascript">

<!--
var z = 0;

var Bild = new Array();
Bild[0] = "<img src=\"200001.jpg\"  width=\"100px\" height=\"100px\" border=\"0\">";
Bild[1] = "<img src=\"200002.jpg\"  width=\"100px\" height=\"100px\" border=\"0\">";



function Vor()
{
if(z < Bild.length-1)
z += 1;
document.getElementById("bild").innerHTML = Bild[z];
document.getElementById("zaehler").innerHTML = "Bild "+(z+1)+" von "+Bild.length;
}
function Zurueck()
{
if (z > 0)
z-= 1;
document.getElementById("bild").innerHTML = Bild[z];
document.getElementById("zaehler").innerHTML = "Bild "+(z+1)+" von "+Bild.length;
}
//-->
</script>

<style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #888; }

#a1 { position:absolute; top:35px; left:240px; width:150px; height:150px; z-index:1; background-color:#ddf; }
#a2 { position:absolute; top:90px; left:230px; width:120px; height:70px; z-index:2; background-color:#ccf; }

</style>
<div id="a1">a1 absolute</div>
<div id="a2">a2 absolute</div>
</div>
<style type="text/css">
<!--
#wrapper {
width:800px;
height:600px;
margin:auto;
position:relative;
}
#wrapper #card {
position:absolute;
}
#wrapper form, #wrapper #zaehler, #wrapper #bild {
position:relative;
z-index:2;
}
#wrapper #bild {
left:200px;
top:100px;
}
-->
</style>
</head>
<body onload="Zurueck();">
<div id="wrapper">
     <img id="card" src="card.gif" width="1000" height="1200" alt="">
     <form>
           <input type="Button" name="rwd" value="<--" OnClick="Zurueck();">
           <input type="Button" name="fwd" value="-->" OnClick="Vor();">
     </form>
     <span id="zaehler"></span>
     <div id="bild"></div>
</div>
</body>
</html>
```


----------



## Maik (26. August 2009)

at0x hat gesagt.:


> Hm, eigentlich kann ich doch die Bilder die ich habe nun via CSS durch eigene Icons ersetzen oder nicht?


Nö, denn die Formatierungssprache CSS hat keinen Zugriff auf das src-Attribut des <img>-Elements, um darin die Bild-Quelle zu ändern.

Und was hat es mit den beiden DIV-Blöcken "*#a1*" und "*#a2*" auf sich, die  zwischen den beiden <style>-Bereichen im Dokumentheader nichts zu suchen haben?

mfg Maik


----------



## at0x (26. August 2009)

Hm, wie kann ich das denn dann machen?
Dass ich meine Icons via Buttons einblenden kann?

Hm, die Div-Blöcke habe ich reingemacht um zu gucken, wie das aussieht, wenn ich ne CSS-Absolute auf deim Bild drauf habe. Bin ja davon ausgegangen, dass ich sie aus und einblenden lassen kann :/


----------



## Maik (26. August 2009)

Entsprechen denn die beiden Grafik-Elemente "200001.jpg" und "200002.jpg" nicht deinen Icons?

mfg Maik


----------



## at0x (26. August 2009)

Mitlerweile ja. Habe sie ersetzt...Also kann ich die Css-Absoluten wieder rausnehmen ja?

Also blende ich die ICONS wie vorher schon ein ja? Die kann ich ja auch positionieren wie ich will oder?


----------



## Maik (26. August 2009)

Mach es doch so:

```
Bild[0] = "<img src=\"200001.jpg\" alt=\"2\" width=\"100\" height=\"100\" border=\"0\" id=\"icon1\">";
Bild[1] = "<img src=\"200002.jpg\" alt=\"2\" width=\"100\" height=\"100\" border=\"0\" id=\"icon2\">";
```


```
#icon1 {
position:absolute;
top:35px;
left:240px;
width:150px;
height:150px;
}
#icon2 {
position:absolute;
top:90px;
left:230px;
width:120px;
height:70px;
}
```

mfg Maik


----------



## at0x (26. August 2009)

Genau so habe ich mir das vorgestellt...Danke Maik :>

Hm, ich kann das doch auch mittels Radiobutton, anstatt der Buttons die ich habe oder?
Geht das irgendwie, dass ich z.B. zwei oder 3 Radiobuttons anklicke und dann OK anklicke und er zeigt mir genau diese ausgewählte Icons dann an?

Ich weiß lauter dumme Fragen, aber als Anfänger ist das alles so ein bissel naja


----------



## Maik (26. August 2009)

Tausch doch mal den type-Wert "button" gegen "radio" aus.

mfg Maik


----------



## at0x (26. August 2009)

Ah, zu spät zum Editieren..

Hm, ich habe anstatt Button -> Checkbox genommen... Da setze ich ja nun mein Häkchen rein. Nachdem ich das getan habe, will ich auf nen Ok Button drücken und er soll mir dann die ausgewählen Icons anzeigen, die ich in der Checkbox angeklickt habe...Geht das noch über HTML?


----------



## Maik (26. August 2009)

Über HTML geht da schon mal garnichts 

Naja, und dein Javascript mit der "Vor()"- und "Zurück()"-Funktion ist hierfür auch überhaupt nicht ausgelegt.

mfg Maik


----------



## at0x (26. August 2009)

Japp, das würde dann ja rausfliegen..
Und durch ein Auswahl-Java Script ersetzt werden 

Aber wie? oO


----------



## at0x (26. August 2009)

Also ich habe das nun soweit hinbekommen, dass ich unterschiedliche Icons anzeigen lassen kann. Aber was mir fehlt ist eine Mehrfachauswahl...Das ist echt zum Verzweifeln...


----------

