HTML: Untere Ebene trotz Bild darüber anklicken?

Hallo! Ich möchte ein Bild so über die Website legen, dass die Ränder verziert sind, man aber dort wo keine Verzierungen sind noch Buttons, Links, etc. anklicken kann.

Siehe: http://mg.dot-design.de/index.php

Dabei habe ich das Bild so über die Seite gelegt:

  <img src="overlay.png" style="width: 100%; height: 100%; position: fixed;">

3 Antworten

mgdotdesign

25.04.2024, 15:59

Hallo Destranix, vielen vielen Dank! Es funktioniert!

geri3d

20.04.2024, 13:25

Mach ein transparentes Bild als Link darüber vlt geht das.

Woher ich das weiß:Hobby – Ich bin älter als das Internet.

Tilo2300

20.04.2024, 13:31

Nur weil etwas transparent ist, heißt das nicht, dass es nicht da ist. Kann man an einer Fensterscheibe ganz gut nachvollziehen.

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmieren & Softwareentwicklung

20.04.2024, 13:30

Füge im CSS folgendes hinzu:

pointer-events: none;

Das sollte dann gehen. Siehe auch:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

In addition to indicating that the element is not the target of pointer events, the value

none

instructs the pointer event to go "through" the element and target whatever is "underneath" that element instead.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Autotuning</title>
<link rel="shortcut icon" href="T4Nissan 240 SX BR101.png" type="image/x-icon">
<meta name="description" content="">
<link href="styleSeite1.css" rel="stylesheet">
</head>
<body>
<br><br><br><br><br><br><br><center>
<a href="NFSU.html"><img src="images/NFSU.jpg" width="" height="230" style="align:/></a>
<a href="NFSU2.html"><img src="images/NFSU2.JPG" width="" height="235" style="align:/></a>
<a href="NFSUC.html"><img src="images/NFSUC.JPG" width="" height="241" style="align:/></a>
<a href="NFSC.html"><img src="images/NFSC.JPG" width="" height="237" style="align:/></a>
<a href="NFSMW2005.html"><img src="images/NFSMW2005.JPG" width="" height="230" /></a><br>
<a href="MC3DER.html"><img src="images/MC3DER.JPG" width="" height="250" style="vertical-align:/></a>
<a href="MCLACE.html"><img src="images/MCLACE.JPG" width="" height="250"/></a>
<a href="Gran Turismo 6.html"><img src="images/Gran Turismo 6.jpg" width="" height="250" /></a>
<a href="LEGO.html"><img src="images/LEGO.JPG" width="" height="250" /></a><br>
<a href="Modellbau.html"><img src="images/Modellbau.jpg" width="500" height="" align="top"/></a>
<a href="Sonstige.html"><img src="images/Sonstige.JPG" width="230" height="" align="top"/></a>
<a href="GTA5.html"><img src="images/Coil Cyclone.jpg" width="350" height="" align="top"/></a>
<a href="Silent Hill.html"><img src="images/Halo.JPG" width="185" height="" align="top"/></a>
</body>
</html>

durch ,,style=""´´ werden die Hyperlinks ohne Abstand platziert. Warum werden diese Hyperlinks gruppiert und alle außer dem erstem werden ignoriert? Die Frage ist leicht zu verstehen beim Blick auf den F12-Debugger im Browser. </style> löst das Problem nicht. autotuningyv.square7.ch/Seite1.html. Kann jemand den Quelltext bitte korrigieren?

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

wie unterscheidet man bilder in HTML/CSS?

Okay, ich habe auf meine Website nen Bild eingefügt,

ganz normal

und das zweite

<img src="http://t3.gstatic.com/licensed-image?q=tbn:ANd9GcQkZ6w8bYc2wm0VHc6SPTWVPGZogOf5Oseh35yBMeBbl2ByMCnTPoawYRQcuY9M"

height="646" weight="818"

aber jetzt will ich beide an andere positionen mit css verschieben.

aber dann schreibe ich img {

position:relative;

left:0%;

bottom:60%;

}

wie unterscheide ich das jetzt vom zweiten welches ich wo anders hin machen wollte?

falls ich etwas absolut falsch gemacht habe tut es mir leid, ich lerne HTML/CSS seit 2 Tagen

...zur Frage

HTML Editor Bilder verschieben?

hallo, melde mich nochmal auf Grund meiner Website.

Der Code um Bilder darzustellen und seine Größe zu bestimmen ist ja

<img src="Beispiel.jpg" width="100" height="100" border="0"> jedoch kenne ich keinen Befehl um die Position des Bildes auf der Seite zu bestimmen. Kann mir da jemand weiterhelfen?

...zur Frage

Fehler bei HTML Bild?

Lerne letzterzeit aus Spaß ein bisschen HTML.

Jedoch, wenn ich ein Bild hinzufügen möchte mit:

<img src=„https://x.y.de“> kommt da nur folgendes:

Das Bild wird also nicht ganz angezeigt.

Liegt es vllt. daran, dass ich „width“ und „height“ nicht angegeben habe?

...zur Frage

Warum werden nicht alle Bilder in einem "versteckt" (overflow: hidden;)?

Guten Tag liebe Community,

ich bin dabei, einen Slider zu bauen und leider "versteckt" sich nur ein Bild in einem. Das dritte Bild bleibt wie schon davor nur in seiner Position. Liegt das eventuell an dem <img>?

Beim ersten <img>: picture1.jpg.jpg
Beim zweiten <img>: picture2.jpg.jpg
Beim dritten <img>: o233-ai4Q4-unsp.jpg -> hier ganz anderer Name

Welche Lösungen gibt es für dieses Problem?

Hier der wichtigste (Teil-)Code:

Der CSS-Code:

.Slider {
  width: 800px;
  height: 500px;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

HTML-Code (ein Teil):

<div class="Slider">
  <div class="Slides">
    <input type="radio" name="radio-btn" id="radio1">
    <input type="radio" name="radio-btn" id="radio2">
    <input type="radio" name="radio-btn" id="radio3">
    <div class="slidefirst">
      <img src="picture1.jpg.jpg" alt="" width="160" height="145" />
    </div>
    <div class="slidesecond">
      <img src="picture2.jpg.jpg" alt="" width="160" height="145" />
    </div>
    <div class="slidethird">
      <img src="o233-ai4Q4-unsp.jpg" alt="" width="160" height="145" />
    </div>
    <div class="navigation auto">
      <div class="auto-btn-1"></div>
      <div class="auto-btn-2"></div>
      <div class="auto-btn-3"></div>
    </div>

...zur Frage

Html / CSS: Abstand zwischen vier Bildern?

Hey.

Ich möchte gerne zwischen meinen vier Bildern einen Abstand von 0,5cm - 2cm.

Wie und wo trage ich das ein?

<ul>
  <h4><li><a href="Forum.html">Forum</a></li></h3>
  <h4><li><a href="Kontakt.html">Kontakt</a></li></h3>
  <h4><li><a href="shop.html">Vintage Kleidung & Möbel</a></li></h4>
  <h4><li><a href="Startseite.html">Startseite</a></li></h4>
  <img src="Vintage0.jpg" width="250" height="250" alt="vinjacke">
  <Img src="Vintage3.jpg" width="250" height="250" alt="vinjacke">
  <Img src="Vintage4.jpg" width="250" height="250" alt="vinjacke">
  <Img src="Vintage5.jpg" width="250" height="250" alt="vinjacke">

(Für mich ist das ziemliches Neuland. Bitte Rücksicht nehmen, ich mache das erst seit vorgestern)

PS.: Das ist nur ein Teil meiner HTML-Datei! Ich möchte nur, dass ihr einen kleinen Ausschnitt seht.

Danke.

...zur Frage

Mit html Bilder kleiner/größer machen?

Ich arbeite gerade aus spaß an meiner html Seite und HTML möchte meine Bilder nicht kleiner und größer machen ich benutze diesen Tag:

"width" und "height" funktionieren aber nicht woran könnte das liegen?

...zur Frage

HTML mehrere onclick?

<script>function play() {var audio = document.getElementById("sd_00143");audio.play();}</script><a href="#A1Acura RSX SH_"><img src="bilder/NFSU2/A1Acura RSX SH_.jpg" id="A1Acura RSX SH_" width="220" height="120" onclick="play()"><audio id="sd_00143" src="sd_00143.mp3"></audio></a>

<script>function play() {var audio = document.getElementById("Sexy Beam");audio.play();}</script><a href="#B4Audi A3 nude tits_"><img src="bilder/NFSU2/B4Audi A3 nude tits_.jpg" id="B4Audi A3 nude tits_" width="220" height="120" onclick="play()"><audio id="Sexy Beam" src="Sexy Beam.wav"></audio></a>

Beide Bilder spielen beim Anklicken Sexy Beam.wav. Kann jemand die multiplen Audiodateiaufrufe in einer einzigen HTML-Seite korrigieren?

...zur Frage

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zur Frage

SVG in HTML einbinden geht nicht?

Guten Tag Gutefrage-Community,

wie im Titel schon steht, habe ich das Problem, dass ich eine SVG-Datei nicht in meine HTML-Datei einbinden kann. Dies geht in keiner von mir erstellen HTML-Datei. Ich versuche es wie folgt einzubinden:

<img src="value.svg">

Die SVG-Datei sieht wie folgt aus:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 400 400">
  <image id="v" x="5" y="5" width="390" height="390" xlink:href="..."/>
</svg>

...zur Frage

Hilfe für c# code mit HTML &CSS in Blazor?

Hallo, ich möchte eine WetterApp programmieren mit Blazor und sitze jetzt schon 4 Tage an dem Problem mit C#, da ich keine Ahnung habe wo ich anfangen soll und generell neu bin und nicht ganz vertraut bin. Ich habe die WetterApp mit JavaScript programmiert, allerdings soll ich C# verwenden und nicht JavaScript deshalb brauch ich eure Hilfe! Kann mir wer dabei helfen einen C# Code zu schreiben, welcher dasselbe macht wie mein javaScript-Code:

1. Ich möchte das mein "SeachrIcon-Button" aus einem HTML-Code als Suchbutton fungieren kann, womit ich die einzelnen Städte suchen kann, damit mir dabei dann die Wetterdaten angezeigt werden.

Ich möchte, dass dann die Bilder der zu den jeweiligen Wetter vorkommnissen angepasst werden, also die Wetter Daten sollen in der Console angezeigt werden aber nicht auf dem Display

Hier mein Html Code:

<body class="backgroundimage">


  <div class="card">
      <div class="search">
          <button><img src="/images/SuchIcon.png"></button>


              <input type="text" placeholder="Search" spellcheck="false" />
        
      
      </div>
  </div>
    
     
  <div class="weather"> 
      <div class="center margin-top">
      <img src="images/image1.png" width="200" height="200" style="opacity: 1" class="weather-icon" />
      </div>


     <div>
          <h1 class="temp">22°c</h1>
     </div>
      
      
      <div class="center">
          <h2 class="city center margin-top">New York</h2>
      </div>


          <hr class="hr1 line1" />

          <div id="imagesMain">
              <img src="/images/image1.png" width="75" height="75" class="imageline " />
              <img src="/images/image1.png" width="75" height="75" class="imageline " />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;" />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 12px; margin-right: -10px;" />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 2px; margin-right: -14px;"/>


          </div>

          <div>
           
              <p style="color:black;" class="line0 title margin-left ">Monday</p>
              <p style="color:black;" class="line0 title margin-left ">Tuesday</p>
              <p style="color:black;" class="line0 title margin-left ">Wednesday</p>
              <p style="color:black;" class="line0 title margin-left ">Thursday</p>
              <p style="color: black;" class="line0 title margin-left ">Friday</p>
             
           
          </div>

          <hr class="hr1 line" />

      <div class ="details">
          <div class="col">
              <img src="images/humidity.png"/>
              <div>
                  <p class="speed">Humidity</p>
                  <p class="humidity">50%</p>
                  
              </div>
          </div>
          <div class="col">
              <img src="images/wind.png" />
              <div>
                  <p class="speed">Wind Speed</p>
                  <p class="wind">15 km/h </p>
                 
              </div>

          </div>

      </div>
  </div>
  
   </body>

Im unteren Kommentar werd ich die restlichen Codes posten

...zur Frage

was ist hier falsch gelaufen?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rocket vs Aliens</title>
  <style>
    canvas {
      background-color: gray;
    }
    
  </style>
  <script>
    let KEY_SPACE = false;
    let KEY_UP = false;
    let KEY_DOWN = false;
    let canvas;
    let ctx;
    let backgroundImage = new Image();
    let rocket = {
      x: 100,
      y: 200,
      width: 200,
      height: 80,
      src: 'img/rocket.png'
    };
    let spaceship = {
      x: 500,
      y: 200,
      width: 100,
      height: 40,
      src: 'img/spaceship.png'
    };
    document.onkeydown = function(e) {
      if (e.keyCode ==32) { // Leertaste gedrückt
        KEY_SPACE = true;
      }
      if (e.keyCode ==32) { // unten gedrückt
        KEY_SPACE = true;
      }
    
      if (e.keyCode ==38) { // Oben gedrückt
        KEY_UP = true;
      }
    }
    document.onkeyup = function(e) {
      if (e.keyCode ==32) { // Leertaste losgelassen
        KEY_SPACE = false;
      }
    
      if (e.keyCode ==38) { // oben losgelassen
        KEY_UP = false;
      }
      if (e.keyCode ==40) { // unten losgelassen
        KEY_DOWN = false;
      }
    }
    function startGame () {
      canvas = document.getElementById('canvas');
       ctx = canvas.getContext('2d');
      loadImages();
      draw();
      // calculate
    }
    function loadImages() {
      backgroundImage.src = 'img/background.png';
      rocket.img = new Image();
      rocket.img.src = rocket.src;
      spaceship.img = new Image();
      spaceship.img.src = spaceship.src;
    }
    function draw() {
      ctx.drawImage(backgroundImage, 0, 0);
      ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.widht, rocket.height);
      
      requestAnimationFrame(draw);
    }
  </script>
</head>
<body onload="startGame()">
<canvas id="canvas" width="720" height="480"></canvas>
</body>
</html>

...zur Frage

Wie kann ich ein HTML Bild mittig ausrichten ohne Größenänderung?

ich habe es folgendermaßen probiert:

<style type="text/css">
<!--
img.center {
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px; /* negative Hälfte von width:400px */
top: 50%;
height: 150px;
margin-top: -75px; /* negative Hälfte von height:150px */
}
-->
</style>
 
</head>
<body>
 
     <img class="img.center" src="/img/meinbild.jpg">
 
</body>
</html>

jedoch wird das bild damit leider gestaucht. das bild soll aber immer im mittelpunkt des bildes zentriert werden und seine länge-breite-proportion behalten - also keine eierköpfe bekommen. die größe des bildes soll mit der größe des fensters mitwachsen...

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen