Frage Bild-Verlinkung nicht durch <a href="> sondern anders möglich?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

Jokerjoe

Neues Mitglied
6 Mai 2013
17
0
1
Ahoi zusammen,

ich habe ein ziemlich blödes Problem.

Aktuell habe ich zwei Ebenen, auf der oberen befinden sich einige Buttons. Hovert man darüber, ändert sich das Hintergrundbild.
Das klappt alles ganz wundervoll und prächtig.

Nun sollen die Buttons aber anklickbar sein. Und da entsteht das Problem. Der Code ist so, dass innerhalb des "<div>" nur "<img>" Tags vorkommen (dürfen) und diese dann gefaded werden.
Fügt man in diesem div nun einen <ahref> hinzu, funktioniert der fade nicht mehr o_O



Ich habe rumprobiert und probiert. Ich habe über den Button noch eine transparente Ebene gelegt (und diese verlinkt) mit einem transparenten Bild, aber auch hier funktioniert der Hover nicht, da der Cursor nicht "Durch das Bild" geht.
Auch mit CSS Transparenzen (Also das bild auf 0% opacity zu schalten), hat leider nicht geklappt. Sobald ein Bild darüber ist, wird der hover nicht mehr erkannt.


Diesen Code zu schreiben hat mich viel Kraft und Zeit gekostet (Der eigentliche Code ohne Kürzungen ist erheblich umfangreicher), eine gänzliche Umprogrammierung ist ausgeschlossen.
Gibt es irgend eine andere Möglichkeit, die Buttons zu verlinken? Etwa in CSS selbst, also ohne <ahref> oder ähnliches? Ich habe bei Google auch nichts gefunden.

Vielen Dank für Eure Hilfe, im Voraus :smile:



CODE HTML (Ich habe mal alle Styles entfernt, alles mit position:absolute.
HTML:
<div >
                <img class="hov hov1" src="BUTTON1.jpg">
                <img class="hov hov2" src="BUTTON2.jpg">
         <div>
                <img class="bild bild1" src="BGBILD1.jpg">
                <img class="bild bild2" src="BGBILD2.jpg">
          </div>
</div>



CODE CSS
CSS:
.div{
  position:absolute;
  top:170px;
  left:10px;
}
.bild{
  opacity:0;
  position:absolute;
  transition: opacity 1.0s ease-in-out;
}

.hov1:hover ~ div .bild1,
.hov2:hover ~ div .bild2,
  opacity:1;
  transition: opacity 1.0s ease-in-out;
}
 
Zuletzt bearbeitet:

basti1012

Aktives Mitglied
26 November 2017
903
97
28
38
Minden
sebastian1012.bplaced.net
Bei mir funktioniert gerade so wie es jetzt ist gar nix.( Fehlt Klammer und co )
Kann ja sein das da ja noch was fehlt nur das sehen wir ja nicht.
Ansonsten würde ich das anders machen , jenachdem was du da genau vor hast .

Aber zu dein problem.
Du sagst das es ohne <a href faden tut und alles gut ist.
Wenn du <a drum herum baust geht es nicht.
Dann fade doch das <a und dann sollte es auch wieder gehen.

Wie soll das den gehen ?
Du hovers hov1 und bild1 soll erscheinen ? und bei hov2 und bild2 genau so ?
 
Zuletzt bearbeitet:

Jokerjoe

Neues Mitglied
6 Mai 2013
17
0
1
Ahoi,
erst einmal ganz lieben Dank für deine antwort!


Ich hatte gerade noch eine Idee aber auch die klappt leider nicht. o_O Grrrr.

Die Buttons (Die runden in Blau) verändern bei Mouseover das Hintergrundbild.
5210



Die buttons direkt zu verlinken, klappt nicht.

Die Lösung wäre ein transparentes Div darüber zu setzen (aus praktischen Gründen hier im Beispiel ROT gefärbt --- Im Original-Zustand transparent.)
Doch der transparente div blockt das Hintergrundbild, also den Mouseover.


(Hintergrund-Bild ändert sich nicht mehr.)
5211


Der Mouseover soll also bestehen bleiben. Doch das div blockt es. Den Div transparent setzen funktioniert nicht, selbes Resultat. Ein transparentes Bild funktioniert auch nicht.

Ich werde hier noch wahnsinnig :D

Hat jemand eine Idee oder Lösung? :smile:
 
Zuletzt bearbeitet:

basti1012

Aktives Mitglied
26 November 2017
903
97
28
38
Minden
sebastian1012.bplaced.net
zeig erstmal dein Code was du schon hast , damit man auch sieht was du genau meinst.

Verstehe nicht was du meinst das man die buttons nicht direkt verlinken kann ???
Wozu ein Div rüberlegen ??

Zeig mal dein Code der nicht ging damit man verstehet was du gemacht hast und was dein Ziel ist.
Dein erstes problem konnte man auch ganz einfach lösen in den man das a faden tut
 
Reactions: Jokerjoe

Jokerjoe

Neues Mitglied
6 Mai 2013
17
0
1
HTML:
<div style="width:800px; margin-left:auto; margin-right:auto;">
                <img class="hov hov1" src="imgs/icons/1_robust.png"                 style="margin-top:152px; margin-left: -25px; position:absolute; z-index:10; padding-right:20px; filter:alpha(opacity=5); -moz-opacity: 0.50; opacity: 0.50;" width="100" height="100"></a>
                <img class="hov hov2" src="imgs/icons/2_flammgeschuetzt.png"         style="margin-top: 85px; margin-left:  86px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov3" src="imgs/icons/3_beleuchtet.png"             style="margin-top: 55px; margin-left: 214px; position:absolute; z-index:10; padding-right:33px;" width="100" height="100">
                <img class="hov hov4" src="imgs/icons/4_hauseigene_produktion.png"     style="margin-top: 43px; margin-left: 345px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov5" src="imgs/icons/5_hygienisch.png"             style="margin-top: 55px; margin-left: 472px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov6" src="imgs/icons/6_wassergeschuetzt.png"         style="margin-top: 85px; margin-left: 601px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov7" src="imgs/icons/7_temperatur.png"             style="margin-top:152px; margin-left: 710px; position:absolute; z-index:10;" width="100" height="100">
            <div style="vertical-align: middle; text-align: center; width:100%; position:absolute;left:0;">
                <img class="bild bild1" src="imgs/eigenschaften/robust_bg.jpg"             style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild2" src="imgs/eigenschaften/flammgeschuetzt_bg.jpg" style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild3" src="imgs/eigenschaften/beleuchtet_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild4" src="imgs/eigenschaften/in-house_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild5" src="imgs/eigenschaften/hygienisch_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild6" src="imgs/eigenschaften/wassergeschuetzt_bg.jpg" style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild7" src="imgs/eigenschaften/temperatur_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img src="imgs/kompetenzen/all.jpg" id="change_image"                     style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
            </div>




CSS:
/* Image Gallery */

.div{
  position:absolute;
  top:170px;
  left:10px;
}
.bild{
  opacity:0;
  position:absolute;
  transition: opacity 1.0s ease-in-out;
}

.hov1:hover ~ div .bild1,
.hov2:hover ~ div .bild2,
.hov3:hover ~ div .bild3,
.hov4:hover ~ div .bild4,
.hov5:hover ~ div .bild5,
.hov6:hover ~ div .bild6,
.hov7:hover ~ div .bild7{
  opacity:1;
  transition: opacity 1.0s ease-in-out;
}

Hier, ich hoffe das hilft :)
Es kann sein, dass da einige Code-Stücke noch überflüssig sind, ich bin halt momentan viel am rumwurschteln :D




Hier der HTML Code mit dem DIV darüber, der dann verlinkt wird (Musst mal gucken mit browser breite):

Hier in Rot. Transparent dann:
<div style="position:absolute; background-color:red; height:200px; width:200px; z-index:200; left:150px; filter:alpha(opacity=0); -moz-opacity: 0.00; opacity: 0.00;">

HTML:
<a href="#"><div style="position:absolute; background-color:red; height:200px; width:200px; z-index:200; left:150px;">
</div></a>



<div style="width:800px; margin-left:auto; margin-right:auto;">
                <img class="hov hov1" src="imgs/icons/1_robust.png"                 style="margin-top:152px; margin-left: -25px; position:absolute; z-index:10; padding-right:20px; filter:alpha(opacity=5); -moz-opacity: 0.50; opacity: 0.50;" width="100" height="100"></a>
                <img class="hov hov2" src="imgs/icons/2_flammgeschuetzt.png"         style="margin-top: 85px; margin-left:  86px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov3" src="imgs/icons/3_beleuchtet.png"             style="margin-top: 55px; margin-left: 214px; position:absolute; z-index:10; padding-right:33px;" width="100" height="100">
                <img class="hov hov4" src="imgs/icons/4_hauseigene_produktion.png"     style="margin-top: 43px; margin-left: 345px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov5" src="imgs/icons/5_hygienisch.png"             style="margin-top: 55px; margin-left: 472px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov6" src="imgs/icons/6_wassergeschuetzt.png"         style="margin-top: 85px; margin-left: 601px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov7" src="imgs/icons/7_temperatur.png"             style="margin-top:152px; margin-left: 710px; position:absolute; z-index:10;" width="100" height="100">
            <div style="vertical-align: middle; text-align: center; width:100%; position:absolute;left:0;">
                <img class="bild bild1" src="imgs/eigenschaften/robust_bg.jpg"             style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild2" src="imgs/eigenschaften/flammgeschuetzt_bg.jpg" style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild3" src="imgs/eigenschaften/beleuchtet_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild4" src="imgs/eigenschaften/in-house_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild5" src="imgs/eigenschaften/hygienisch_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild6" src="imgs/eigenschaften/wassergeschuetzt_bg.jpg" style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild7" src="imgs/eigenschaften/temperatur_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img src="imgs/kompetenzen/all.jpg" id="change_image"                     style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
            </div>
        </div>
 
Zuletzt bearbeitet:

basti1012

Aktives Mitglied
26 November 2017
903
97
28
38
Minden
sebastian1012.bplaced.net
Ich weiß immer noch nicht was du erreichen willst.
die class="hov" bilder sollen gehovert werden und die class="bild" sollen dann angezeigt werden oder wie ?
Dann das...
Die buttons direkt zu verlinken, klappt nicht.
Wo sind da Buttons ?
Wo sind die Links? Beim oberen hast du nur ein schliessendes </a> und beim unteren nur ein Leeres <a></a>
was beides gerade nicht viel weiter helfen tut.
Erklär mal genau was passieren soll.

Vieleicht hilft dir ja die Lösung zu dein ersten Problem weiter was in Beitrag 1# noch wahr.
Ich hatte gesagt das man einfach das <a> Faden soll, also so...
https://codepen.io/basti1012/pen/oNvBxKQ

Vieleicht kommst du dann mit dein problem schon weiter, ansonsten brauche ich nee bessere erklärung was in dein Code passieren soll ( End Ergebniss )
 
Reactions: Jokerjoe

Jokerjoe

Neues Mitglied
6 Mai 2013
17
0
1
Die Buttons sind die "<img class="hov hov1" src="imgs/icons/1_robust.png" > Grafiken.
Das wechselnde Hintergrundbild "<img class="bild bild3" src="imgs/eigenschaften/beleuchtet_bg.jpg">

Die Benennung ist in der Tat etwas irreführend.

Jeder Button soll verlinkt werden, doch wenn ich da einen <a href> Link davor packe, funktioniert der Hintergrundwechsel nicht mehr.



HTML:
<div style="width:800px; margin-left:auto; margin-right:auto;">
                <img class="hov hov1" src="imgs/icons/1_robust.png"                 style="margin-top:152px; margin-left: -25px; position:absolute; z-index:10; padding-right:20px; filter:alpha(opacity=5); -moz-opacity: 0.50; opacity: 0.50;" width="100" height="100"></a>
                <img class="hov hov2" src="imgs/icons/2_flammgeschuetzt.png"         style="margin-top: 85px; margin-left:  86px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov3" src="imgs/icons/3_beleuchtet.png"             style="margin-top: 55px; margin-left: 214px; position:absolute; z-index:10; padding-right:33px;" width="100" height="100">
                <img class="hov hov4" src="imgs/icons/4_hauseigene_produktion.png"     style="margin-top: 43px; margin-left: 345px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov5" src="imgs/icons/5_hygienisch.png"             style="margin-top: 55px; margin-left: 472px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov6" src="imgs/icons/6_wassergeschuetzt.png"         style="margin-top: 85px; margin-left: 601px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov7" src="imgs/icons/7_temperatur.png"             style="margin-top:152px; margin-left: 710px; position:absolute; z-index:10;" width="100" height="100">
            <div style="vertical-align: middle; text-align: center; width:100%; position:absolute;left:0;">
                <img class="bild bild1" src="imgs/eigenschaften/robust_bg.jpg"             style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild2" src="imgs/eigenschaften/flammgeschuetzt_bg.jpg" style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild3" src="imgs/eigenschaften/beleuchtet_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild4" src="imgs/eigenschaften/in-house_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild5" src="imgs/eigenschaften/hygienisch_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild6" src="imgs/eigenschaften/wassergeschuetzt_bg.jpg" style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild7" src="imgs/eigenschaften/temperatur_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img src="imgs/kompetenzen/all.jpg" id="change_image"                     style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
            </div>
        </div>


>>> HINTERGRUNDWECHSEL FUNKTIONIERT NICHT (mit a href, hov hov1)
HTML:
<div style="width:800px; margin-left:auto; margin-right:auto;">
        <a href="#"><img class="hov hov1" src="imgs/icons/1_robust.png"                 style="margin-top:152px; margin-left: -25px; position:absolute; z-index:10; padding-right:20px; filter:alpha(opacity=5); -moz-opacity: 0.50; opacity: 0.50;" width="100" height="100"></a>
                <img class="hov hov2" src="imgs/icons/2_flammgeschuetzt.png"         style="margin-top: 85px; margin-left:  86px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov3" src="imgs/icons/3_beleuchtet.png"             style="margin-top: 55px; margin-left: 214px; position:absolute; z-index:10; padding-right:33px;" width="100" height="100">
                <img class="hov hov4" src="imgs/icons/4_hauseigene_produktion.png"     style="margin-top: 43px; margin-left: 345px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov5" src="imgs/icons/5_hygienisch.png"             style="margin-top: 55px; margin-left: 472px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov6" src="imgs/icons/6_wassergeschuetzt.png"         style="margin-top: 85px; margin-left: 601px; position:absolute; z-index:10; padding-right:30px;" width="100" height="100">
                <img class="hov hov7" src="imgs/icons/7_temperatur.png"             style="margin-top:152px; margin-left: 710px; position:absolute; z-index:10;" width="100" height="100">
            <div style="vertical-align: middle; text-align: center; width:100%; position:absolute;left:0;">
                <img class="bild bild1" src="imgs/eigenschaften/robust_bg.jpg"             style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild2" src="imgs/eigenschaften/flammgeschuetzt_bg.jpg" style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild3" src="imgs/eigenschaften/beleuchtet_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild4" src="imgs/eigenschaften/in-house_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild5" src="imgs/eigenschaften/hygienisch_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild6" src="imgs/eigenschaften/wassergeschuetzt_bg.jpg" style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img class="bild bild7" src="imgs/eigenschaften/temperatur_bg.jpg"        style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
                <img src="imgs/kompetenzen/all.jpg" id="change_image"                     style="max-width:1600px; width:100%; height:580px; margin-top:-130px;">
            </div>
        </div>


Da es mit <a href> nicht geklappt hat, war eine alternative Idee, ein div drüber zu legen und das div zu verlinken. Doch auch das klappt nicht.

Am Ende sollen die Buttons verlinkt werden, egal wie. Aber es klappt nicht ohne den Hintergrundwechsel kaputt zu machen.
 

basti1012

Aktives Mitglied
26 November 2017
903
97
28
38
Minden
sebastian1012.bplaced.net
ich habe dir ja ein Beispiel gepostet von den Problem im ersten Beitrag. Das ist genau das gleiche , nur halt mehr Bilder.
Kuck dir das mal genau an dann solltest du das auch hinbekommen. Du brauchst da keine extra divs oder sonst was für erstellen
 
Reactions: Jokerjoe

Jokerjoe

Neues Mitglied
6 Mai 2013
17
0
1
Alles klar, ich schaue es mir mal genauer an, danke :)

[edit]
Ach guck an, wie immer war die Lösung pups-einfach!

Wenn ich dem Link die Klasse hov zuweise, und nicht der Grafik, klappt es. :D
In solchen Momenten komme ich mir einfach nur blöd vor :D Aber ich danke dir vielmals für deine Hilfe.

Do
<a href="#" class="hov hov1"><img src="imgs/icons/1_robust.png" >

Dont
<a href="#"><img src="imgs/icons/1_robust.png" class="hov hov1">

Thanks! :cool: