ralus67
Goto Top

HTML Box mit Auswahlen und Link

Hallo Community

Ich habe von HTML keine Ahnung, deshalb stelle ich hier die Frage.

Ich möchte ein Feld erstellen, welche drei weiteren Felder (Boxen) enthält.
Das Erste Feld soll quasi als Rahmen über die drei unteren Fehler dienen.

Firma A
Firma B
Firma C

Diese Felder Firma A, B und C sollen sich farblich unterscheiden. Sobald man auf das farbige Feld klickt, soll ein externer Link aufgerufen werden.

Wie löse ich das?

Im Voraus vielen Dank für Eure Hilfe

Content-Key: 6558977471

Url: https://administrator.de/contentid/6558977471

Printed on: April 26, 2024 at 08:04 o'clock

Mitglied: 6247018886
Solution 6247018886 Mar 29, 2023 updated at 15:25:06 (UTC)
Goto Top
Moin.
Ich habe von HTML keine Ahnung, deshalb stelle ich hier die Frage.
Kann man aber jederzeit erst mal lernen. Manch einer soll das ja machen bevor er fragt 🤔 🍌
https://wiki.selfhtml.org/

Beispiel, so wie ich den schwierig verständlichen Text interpretieren konnte
https://jsbin.com/supogadaca/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width">  
  <title>Demo</title>
  <style>
     .red {background-color:red;}
     .green {background-color:green;}
     .blue {background-color:blue;color:white}
  </style>
</head>
<body>
<fieldset>
    <legend>My boxes</legend>
    <button class="red" onclick="location.href = 'https://google.de';">Google</button><br/>  
    <button class="green" onclick="location.href = 'https://administrator.de';">Administrator.de</button><br/>  
    <button class="blue" onclick="location.href = 'https://ebay.de';">ebay.de</button>  
</fieldset>
</body>
</html>

Oder wenn du damit ne Combobox meintest
https://jsbin.com/hadasucico/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width">  
  <title>Demo</title>
  <style>
     .red {background-color:red;}
     .green {background-color:green;}
     .blue {background-color:blue;color:white}
  </style>
  <script>
  function openlink(el){
    location.href = el.options[el.selectedIndex].value;
  }
  </script>
</head>
<body>
<fieldset>
    <legend>My companies</legend>
    <select onchange="openlink(this);">  
        <option class="red" value="https://google.de">google.de</option>  
        <option class="green" value="https://administrator.de">administrator.de</option>  
        <option class="blue" value="https://ebay.de">ebay.de</option>  
    </select>
</fieldset>
</body>
</html>
Cheers briggs