Bilder per Button anzeigen lassen

at0x

at0x

Mitglied
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>
 
Moin,

der Wurm steckt hier, der in der Fehlerkonsole des Browsers aber auch einen Syntax-Fehler auswirft:
Code: 
Bild[1] = "<img src=\"200002.jpg\" width=\"437px\" height=\"358px\" border=\"0\">";<style type="text/css">


mfg Maik
 
<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
 
Vielleicht hilft dir hier dieses Ausgangsbeispiel weiter?
HTML: 
<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
 
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: 
<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>
 
at0x hat gesagt.:
Hm, eigentlich kann ich doch die Bilder die ich habe nun via CSS durch eigene Icons ersetzen oder nicht?
Zum Vergrößern anklicken....
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
 
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 :/
 
Entsprechen denn die beiden Grafik-Elemente "200001.jpg" und "200002.jpg" nicht deinen Icons?

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück