[ERLEDIGT] Buttons auf Bild gleich skalieren lassen

[Manlius]

Hallo,

ich habe folgendes Problem:
Und zwar habe ich ein Bild, dass ich praktisch "interaktiv" machen möchte, indem ich Schaltflächen auf das Bild lege und dann je nach "Rubrik" auf eine andere Seite geleitet werde. Soweit funktioniert das Ganze auch. Allerdings sobald ich mein Browserfenster kleiner mache, skalieren meine Buttons anders als das Bild, weshalb es die Buttons ziemlich verschiebt und nichts mehr passt. Im Nachfolgenden der HTML-Code mit CSS in dem [style]-Tag.

<div id="content">
<img id="bild" src="..." alt="...">
<input class="button_v" id = "button_0" type="button" value="" onClick="location.href='...'"> </input>
<input class="button_v" id = "button_1" type="button" value="" onClick="location.href='...'"> </input>
<input class="button_v" id = "button_2" type="button" value="" onClick="location.href='...'"> </input>
<input class="button_v" id = "button_3" type="button" value="" onClick="location.href='...'"> </input>
<input class="button_v" id = "button_4" type="button" value="" onClick="location.href=...'"> </input>
<input class="button_v" id = "button_5" type="button" value="" onClick="location.href='...'"> </input>
<input class="button_v" id = "button_6" type="button" value="" onClick="location.href='...'"> </input>
</div>


<style>
#content{
min-height: 100%;
display: inline-block;
}

#bild{
width:70%;
}

.button_v {
Cursor: pointer;
position: absolute;
background-color: Transparent;
border: none;

}

#button_0 {
top: 18.5%;
left:15.4%;
width: 11.3%;
height: 8.6%;
transform: skew(22.4deg);
}

#button_1 {
top: 27.1%;
left:18.7%;
width: 11.1%;
height: 8.8%; 
transform: skew(22.8deg);
}
#button_2 {
top: 36%;
left:21.9%;
width: 11%;
height: 8.4%; 
transform: skew(22.4deg);
}
#button_3 {
top: 44.4%;
left:24.5%;
width: 22%;
height: 6.1%; 
}
#button_4 {
top: 36%;
left: 37.8%;
width: 11%;
height: 8.5%; 
transform: skew(-22.4deg);
}
#button_5 {
top: 27.1%;
left:40.9%;
width: 11.2%;
height: 9%; 
transform: skew(-22.8deg);
}
#button_6 {
top: 18.7%;
left: 44.2%;
width: 11.2%;
height: 8.6%; 
transform: skew(-22.4deg);
}
</style>

Ich denke es hängt damit zusammen, dass das Bild das Verhältnis beim Skalieren beibehält. Also es wird nicht verzerrt o.ä. Und die Buttons halten ihr Verhältnis eben nicht bei.

Weiß jemand eine Lösung?

Vielen Dank schonmal :)

 

[djheke]

Dein #content brauch position:relative;

 

[Manlius]

Hm in den Entwicklerwerkzeugen des Browsers wird das "position: relative;" durchgestrichen, hat also keine Wirkung.

 

[MrMurphy]

Hallo

dann hast du irgendwo in dem Quelltext, den du uns vorenthälst, eine entsprechende Anweisung stehen. Die musst du ändern oder löschen, je nachdem wie es benötigt wird.

Oder dem richtigen Eintrag eine höhere Spezifität zukommen lassen.

Gruss

MrMurphy

 

[Manlius]

Hi nochmal,

also ob ihr es glaubt oder nicht, das ist der komplette Code
Aber es funktioniert jetzt. Habe einfach nach "position: relative" ein !important gesetzt.

Vielen vielen Dank euch!

 

[newlord]

Moin Moin

Und zwar habe ich ein Bild, dass ich praktisch "interaktiv" machen möchte, indem ich Schaltflächen auf das Bild lege und dann je nach "Rubrik" auf eine andere Seite geleitet werde

Warum so kompliziert? Der <map> Tag tut's genauso gut. Um's dann auch noch responsive zu haben gibt's das hier: https://github.com/davidjbradshaw/image-map-resizer

Grüße