CSS - werde ich niemals verstehen
Hi Leute,
ich bräuchte mal Hilfe von Euch Profis. Ich möchte ein Bild als Hintergrund. In diesem Bild sind Rahmen und in diese Rahmen sollen andere Bilder per Button eingeblendet werden. Und wenn man das im Handy anschaut, soll das natürlich auch alles an den Positionen sein, nur halt in klein.
Kann mir da jemand von Euch helfen? Bei Google hab ich nichts Passendes gefunden, was sich auf die Schnelle realisieren ließe. Oder ich war einfach nur zu doof - aber das Zeug ist so komplex geworden, da bin ich wohl schon zu alt dafür
Der hier verwendete Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script src="/js_webseite/jquery.js"></script>
<style>
#wrapper{
background:black;
height:1000px;
width:1000px;
}
#bconti{
position:relative;
top:300px;
vertical-align:middle;
text-align:center;
display:flex;
}
#bild1{
margin-left:42.5px;
height:400px;
width:250px;
border:10px solid yellow;
background:#abcdef;
}
#bild2{
margin-left:42.5px;
height:400px;
width:250px;
border:10px solid yellow;
background:violet;
}
#bild3{
margin-left:42.5px;
margin-right:42.5px;
height:400px;
width:250px;
border:10px solid yellow;
background:#feecba;
}
#buttoncon{
position:relative;
top:350px;
text-align:center;
}
#button1{
margin-right:170px;;
height:40px;
font-size:30px;
text-align:center;
width:200px
}
#button2{
height:40px;
font-size:30px;
text-align:center;
width:200px
}
#button3{
margin-left:170px;
height:40px;
font-size:30px;
text-align:center;
width:200px
}
img{
width:100%;
height:100%;
}
/* EOS */
</style>
</head>
<body>
<bod>
<div id="wrapper">
<div id="bconti">
<div id="bild1">
</div>
<div id="bild2">
</div>
<div id="bild3">
</div>
</div>
<div id="buttoncon">
<button id="button1">
Bild1
</button>
<button id="button2">
Bild2
</button>
<button id="button3">
Bild3
</button>
</div>
</div>
</bod>
<script>
$('#button1').click(function(){
link1="/image/1.bild.jpg";
$('#bild1').html('<img src="'+link1+'">')
});
$('#button2').click(function(){
link2="/image/001.gif";
$('#bild2').html('<img src="'+link2+'">')
});
$('#button3').click(function(){
link3="/image/1.bild.jpg";
$('#bild3').html('<img src="'+link3+'">')
});
</script>
</body>
</html>