Hallo zusammen,
ich weiß nicht, wie ich eine Suchfunktion in einem Foto/einer Image map mache...
kann mir da jemand weiterhelfen?
Sollte ungefähr so aussehen:
Hallo zusammen,
ich weiß nicht, wie ich eine Suchfunktion in einem Foto/einer Image map mache...
kann mir da jemand weiterhelfen?
Sollte ungefähr so aussehen:
Sowa?
<style>
/* Container für Bild und Text */
.container {
position: relative;
}
.container .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #f1f1f1;
width: 100%;
padding: 20px;
}
/* Style für das Suchfeld */
#mySearch {
width: 20%;
font-size: 18px;
padding: 11px;
margin: 11px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
<div class="container">
<img src="deinbild.jpg" alt="deinbild" style="width:100%;">
<div class="content">
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Suche..." title="suche">
</div>
</div>
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
Alles anzeigen
Hallo Blickwinkelkanone
Danke für die Antwort. Wo genau setzte ich die url des Bildes ein? Kenne mich da leider nicht so aus wie man merkt
In meinem COde wäre das Zeile 30
<img src="deinbild.jpg" alt="deinbild" style="width:100%;">
Vielen Dank!!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.