Ich habe ein Hintergrundbild welches per background-size:contain positioniert ist. Darüber liegt ein div mit hoverbaren Links, die über dem Hintergrund per position:absolute andere Bilder platzieren. Größen und top bzw left Werte sind mit %Angaben gemacht.
Da das Hintergrundbild immer zur Gänze sichtbar sein muss, damit die einzelnen Links zugänglich bleiben, hab ich mich nach langem Rumprobieren für background-size:contain entschieden cover wär natürlich schicker.
Ich habe jetzt aber immer noch das Problem, dass sich die Positionierung der Links und auch der jeweiligen Bilder am gesamten Body orientieren und nicht am Hintergrundbild selbst.
Gibt es in Javascript die Möglichkeit die tatsächliche Höhe und Breite des Hintergrundbildes festzustellen und diese Werte weiterzugeben? Oder gibt es dafür eine CSS- Lösung? Wusste jetzt nicht genau in welchem Forum ich da am Besten aufgehoben bin...
Poste den relevanten Code, tschuldigt bitte, dass es so viel ist. Ist aber anders leider nicht zu veranschaulichen.
Vielen Dank für jede Anregung oder Weiterleitung, die Ihr habt. Und da das meine erste Frage ist in all den Jahren, will heissen, sonst bin ich hier oder woanders immer fündig geworden: Toll, dass es diese Seite gibt******
Ich hoffe ich hab beim Übertragen keinen blöden Fehler eingebaut...
Ist das zu komplex bzw. geht das gar nicht? Soll ich das Thema zu HTML/CSS verschieben? Hab ich mich unklar ausgedrückt?
Vielen Dank für jeden Hinweis!
Da das Hintergrundbild immer zur Gänze sichtbar sein muss, damit die einzelnen Links zugänglich bleiben, hab ich mich nach langem Rumprobieren für background-size:contain entschieden cover wär natürlich schicker.
Ich habe jetzt aber immer noch das Problem, dass sich die Positionierung der Links und auch der jeweiligen Bilder am gesamten Body orientieren und nicht am Hintergrundbild selbst.
Gibt es in Javascript die Möglichkeit die tatsächliche Höhe und Breite des Hintergrundbildes festzustellen und diese Werte weiterzugeben? Oder gibt es dafür eine CSS- Lösung? Wusste jetzt nicht genau in welchem Forum ich da am Besten aufgehoben bin...
Poste den relevanten Code, tschuldigt bitte, dass es so viel ist. Ist aber anders leider nicht zu veranschaulichen.
Vielen Dank für jede Anregung oder Weiterleitung, die Ihr habt. Und da das meine erste Frage ist in all den Jahren, will heissen, sonst bin ich hier oder woanders immer fündig geworden: Toll, dass es diese Seite gibt******
HTML:
<head>
<style type="text/css">
html,body,#bg{
width:100%;
height:100%;
overflow:hidden;
}
#bg {
position:relative;
width:100%;
height:100%;
}
#bg img {
width:100%;
height:auto;
margin:auto;
display:block;
}
#map {
width:100%;
height:100%;
position:relative;
z -index:100;
}
#map a {
display:block;
text-decoration:none;
}
#map a b {
display:block;
z-index:10;
position:absolute;
cursor:pointer;
}
#map em {
display:none;
width:100%;
height:100%;
}
#map em img{
width:100%;
height:auto;
}
#map a:hover em {
display:block;
}
#map a:active em, #map a:focus em{
display:block;
background-color:#F30;
}
#base1 .p1 {width:17%; height:40%; left:82%; top:44%;}
#base1 em {display:none; width:42%; height:20%; position:absolute; left:14%; top:62%;}
#base2 .p1 {width:15%; height:40%; left:55%; top:38%;}
#base2 em {display:none; width:48%; height:45%; position:absolute; left:12%; top:65%;}
#base3 .p1 {width:12%; height:35%; left:2%; top:42%;}
#base3 em {display:none; width:35%; height:44%; position:absolute; left:17%; top:27%;}
#k1 {position:absolute; height:5em; width:18em; top:133%; right:-53%; background:#FFF;}
#k2 {position:absolute; height:5em; width:18em; top:52%; right:-35%; background:#FFF;}
#k3 {position:absolute; height:5em; width:18em; top:138%; right:-67%; background:#FFF;}
</style>
</head>
<body>
<div id="bg" style="background: url(images/base.jpg) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;">
<div id="map">
<a href="path" id="base1">
<b class="p1"></b>
<em><span id="k1"><b> Titel</b><br />
Beschreibung</br>
</span><br />
<img src="path" alt="Titel" id="title" border="0"/>
</em>
</a>
<a href="path" id="base2">
<b class="p1"></b>
<em><span id="k2"><b>Titel</b><br />
Beschreibung<br />
</span><br />
<img src="path" alt="Title" id="title" border="0"/></em>
</a>
<a href="path" id="base3">
<b class="p1"></b>
<em><span id="k3"><b>Titel</b><br />
Beschreibung<br />
</span><br />
<img src="path" alt="Titel" id="title" border="0"/>
</em>
</a>
</div>
</div>
</body>Ich hoffe ich hab beim Übertragen keinen blöden Fehler eingebaut...
Ist das zu komplex bzw. geht das gar nicht? Soll ich das Thema zu HTML/CSS verschieben? Hab ich mich unklar ausgedrückt?
Vielen Dank für jeden Hinweis!
