Transparente Zone über Bild legen

  • wozu transparenter Kasten ? Du sagst wenn man drauf klickt soll pop up aufgehen . Warum brauchst du dann den Kasten ? Klick doch aufs Bild um den Popup zu öffnen.


    Ansonsten muss man wohl den Kasten mit Positionsangaben über den Bild positionieren. Gibt auch noch andere möglichkeiten mit after ,margin usw. Nur bis jetzt sehe ich noch kein Grund für den Transparenten Kasten, weil man auch das Bild anklicken kann. Deswegen brauchen wir mehr Infos was du vor hast

  • Basti1012,


    Das "Bild" ist eine endlos slideshow. Eigentlich soll es möglich sein, dass man auf einen Text im Bild 5 klickt und dann öffnet sich ein Kontaktformular. Der Text ist aber in einem Bild und die Slides wechseln relativ schnell. Deshalb denke ich, dass es besser ist, wenn ich da einen

    transparenten Balken über die Slides lege der ständig über den Slides liegt (dort wo der Text auf dem Bild 5 ist). Dann kann man jederzeit das Formular aufrufen, auch dann, wenn ein anderes Slide angezeigt wird.


    Für den, der die Seite aufruft ist es völlig egal, wenn der Link auch dann geht, wenn eine andere Slide angezeigt wird.


    Ich befürchte, dass es ziemlich kompliziert ist, den Link auf die ganze Slideshow zu legen. So ein unsichtbarer durchsichtiger Knopf über den slides ist bestimmt einfacher.


    brainstuff

  • ehm

    Code
    1. <a href=""><div id="slideshow"></div></a>

    da wäre teoretisch die ganze Slideshow verlinkt. Doch ich sage mal das ist jetzt nicht die beste Lösung . Aber du kannst auch mit javascript die Id slideshow mit einen click Event belegen und wenn einer darauf klickt ( egal welches Bild ) dann öffnet sich dein kontaktformular. Also wie auch immer ist das alles einfacher als deine unsichtbare Box die gar nicht gebraucht wird dafür

  • Basti1012,


    Danke für dieses script.


    Ich habe jetzt die Slideshow in

    <a href=""><div id="slideshow"></div></a>

    gehängt.. Das läuft perfekt.


    Jetzt habe ich nur noch ein Problem mit der Anzeige im querformat auf dem Smartphone. Es wird nur der obere Teil der Slideshow im querformat angezeigt. Mit Viewport schaffe ich es nicht das initial format auf 1 einzustellen und dann das zoomen von 0.5 bis 2 zuzulassen. Minimum und maximum werden anscheinend von vielen Browsern nicht berücksichtigt.


    Deshalb denke ich zur Zeit an eine etwas kuriose Idee: kann man

    <a href=""><div id="slideshow"></div></a> verschachteln ungefähr so :


    <a href="xx/m2">

    <div id="background">

    z-index=1

    <b href="">

    <div id="slideshow">

    z-index=2

    </div></b>

    </div></a>


    Was dann bewirken würde, dass die spezielle Seite für das Querformat geöffnet wird, wenn man auf den hintergründ drückt. Ich denke da an eine Art von Switch, der von der für das hochformat optimierten Seite auf die für das querformat obtimierte Seite Umschalten. Durch das mit dem z-index könnte man erreichen, dass der Link nur auf dem hintergründ liegt und nicht auf der davorgestellen slideshow.


    Wenn das gehen könnte, würde ich das gerne mal ausprobieren um zu sehen ob das was bringt.


    Danke,

    Brainstuff

  • Zitat

    Kann man einen transparenten Kasten über ein Bild legen

    geht doch wunderbar mit opacity:0; (sichtbarkeit)

    popups finde ich nicht gut!

    zu dem Seitenverhältniss Problem gibt es viele css Lösungen


    Code
    1. <style>
    2. @media (orientation: portrait) { /* Formate für hochformatige Ausgabemedien */ }
    3. @media (orientation: landscape) { /* Formate für querformatige Ausgabemedien */ }
    4. @media (min-aspect-ratio: 4/3) { /* oder genauer bis zu welchem seitenverhältniss die regeln gelten sollen */ }
    5. @media (min-device-aspect-ratio: 4/3) { /* Diese switsh bezieht sich auf die geräteabmessungen und nicht auf die des browserfenster */ }