[FRAGE] Mouseover, statt Bild, Text

smalltalk · 06. Mai 2014

Hi.

ich habe für eine Webseite einen Zufallsgenerator mit Js erstellt. Dabei erscheinen nun bei jedem neuen Klick auf die Seite, verschiedene Bilder. Dazu möchte ich nun noch einen Mouseover Effekt einbauen, sodass beim Hover über die Bilder diese von einem Text überdeckt werden.

derzeitiger Code:

HTML:

var how_many_ads = 5;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;

if (ad==1) {
banner="dokumente/bilder/1semester.jpg";
width="250";
height="250";
href="file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/1. Semester/1.semester.html";
}

if (ad==2) {
banner="dokumente/bilder/2semester.jpg";
width="250";
height="250";
href="file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/2. Semester/2.semester.html";
}
if (ad==3) {
banner="dokumente/bilder/3semester.jpg";
width="250";
height="250";
href="file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/3. Semester/3.semester.html";
}
if (ad==4) {
banner="dokumente/bilder/4semester.jpg";
width="250";
height="250";
href="file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/4. Semester/4.semester.html";
}
if (ad==5) {
banner="dokumente/bilder/6semester.jpg";
width="250";
height="250";
href="file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/6. Semester/6.semester.html";
}
document.write('<a href=\"'+ href + '\"><img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + '></a>');

rico2009 · 06. Mai 2014

Du solltest kein document.write mehr verwenden, besser und sicherer ist innerHTML (SELFHTML: JavaScript / Objektreferenz / all).

Hover-Effekt:
Du könntest ein weiteres Element anlegen, z.B. ein span, dieses mit einer ID und z.B. folgenden CSS-Angaben versehen. In dieses Element kannst du dann deinen Text schreiben.

Code:

display: none;
postion: absolute;
width: 100%;
height: 200px;
top: 50%;
left: 50%;

JS:

Code:

document.getElementById("img:hover").style.display = "block";

(Wobei ich mir im Moment nicht ganz sicher bin, ob man die Pseudo CSS Klasse :hover im Plain JS bei getElementById verwenden kann.)

kkapsner · 07. Mai 2014

JS hat selbst eine Zufallsfunktion: Math.random() - da musst du dich nicht auf die Sekunden verlassen. Auch ist deine Datenvorhaltung suboptimal.

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#wrapper {
	display: inline-block;
	position: relative;
}
#wrapper #text {
	display: none;
}
#wrapper:hover #text {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: lightgray;
}
</style>
</head>
<body>
<div id="wrapper">
	<a href="" id="link">
		<img src="" id="image">
	</a>
	<div id="text"></div>
</div>
<script type="text/javascript">
(function(){
	var data = [
		{
			image: "dokumente/bilder/1semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/1. Semester/1.semester.html",
			text: "Darzustellender Text."
		},
		{
			image: "dokumente/bilder/2semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/2. Semester/2.semester.html",
			text: "Darzustellender Text."
		},
		{
			image: "dokumente/bilder/3semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/3. Semester/3.semester.html",
			text: "Darzustellender Text."
		},
		{
			image: "dokumente/bilder/4semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/4. Semester/4.semester.html",
			text: "Darzustellender Text."
		},
		{
			image: "dokumente/bilder/6semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/6. Semester/6.semester.html",
			text: "Darzustellender Text."
		}
	];
	
	var currentDataset = data[Math.floor(Math.random() * data.length)];
	document.getElementById("link").href = currentDataset.href;
	document.getElementById("image").src = currentDataset.image;
	document.getElementById("image").width = currentDataset.width;
	document.getElementById("image").height = currentDataset.height;
	document.getElementById("text").innerHTML = currentDataset.text;
}());
</script>
</body>
</html>

@rico: document.getElementById() funktioniert wirklich nur so, wie der Name sagt: Abfrage nach ID. Du kannst also weder alle <img> (dafür gibt es document.getElementsByTagName()) noch Pseudo CSS-Klassen abfragen. Zusätzlich ist da deine Logik falsch: du willst ja das <span> und nicht das <img> verstecken... aber den hover-Effekt kann man auch rein mit CSS realisieren:

smalltalk · 07. Mai 2014

Vielen Dank schon mal für die Antworten. Ich habe die neue Zufallsfunktion jetzt eingebaut und sie funktioniert soweit auch. Nur zwei Probleme stehen noch offen:

- ich würde die zufallsfunktion gerne öfters verwenden, d.h. den wrapper mehrmals nebenaneinder stehen haben, allerdings wird er mir nur einmal auf der Seite angezeigt. Gibts dafür noch eine Lösung?
- geht man mit der Maus über das Kästchen, funktioniert die Hover Funktion soweit, nur der Hyperlink kann nicht mehr genutzt werden. Gibts dafür auch noch eine Lösung?

kkapsner · 07. Mai 2014

Stimmt - hatte das übersehen.

Das macht das HTML sogar etwas einfacher:

HTML:

<a id="wrapper" href="" id="link">
	<img src="" id="image">
	<span id="text"></span>
</a>

Wenn du das mehrmals machen willst, musst von IDs weg, da diese dokumentenweit eindeutig sein müssen. Am besten gehst du dann auf CSS-Klassen. Auf alle Elemente mit einer bestimmten Klasse greifst du mit document.getElementsByClassName() zu.

smalltalk · 08. Mai 2014

Danke nochmals. Die Funktion läuft jetzt wie gewünscht, allerdings scheitere ich daran die Funktion über Klassen mehrmals nebeneinander ablaufen zu lassen.

Falls es nicht zuviel verlangt ist, wäre es super wenn du mir den umgeschriebenen Code mit Klassen zeigen könntest.

kkapsner · 09. Mai 2014

Zeig' doch mal, was du probiert hast.

smalltalk · 09. Mai 2014

Also ich hab verschiedene Wege ausprobiert. Der, wo mir am wahrscheinlichsten vorgekommen ist, ist einfach die IDs als Klassen zu ersetzen. Ergebnis davon ist das ich nichts weiteres mehr sehe als ein leeres Browserfenster

HTML:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#wrapper {
	display: inline-block;
	position: relative;
}
#wrapper #text {
	display: none;
}
#wrapper:hover #text {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: lightgray;
}
</style>
</head>
<body>
<div id="wrapper">
	<a href="" class="link">
		<img src="" class="image">
	</a>
	<div class="text"></div>
</div>
<script type="text/javascript">
(function(){
	var data = [
		{
			image: "dokumente/bilder/1semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/1. Semester/1.semester.html",
			text: "Darzustellender Text."
		},
		{
			image: "dokumente/bilder/2semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/2. Semester/2.semester.html",
			text: "Darzustellender Text."
		},
		{
			image: "dokumente/bilder/3semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/3. Semester/3.semester.html",
			text: "Darzustellender Text."
		},
		{
			image: "dokumente/bilder/4semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/4. Semester/4.semester.html",
			text: "Darzustellender Text."
		},
		{
			image: "dokumente/bilder/6semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/6. Semester/6.semester.html",
			text: "Darzustellender Text."
		}
	];
	
	var currentDataset = data[Math.floor(Math.random() * data.length)];
	document.getElementsByClassName("link").href = currentDataset.href;
	document.getElementsByClassName("image").src = currentDataset.image;
	document.getElementsByClassName("image").width = currentDataset.width;
	document.getElementsByClassName("image").height = currentDataset.height;
	document.getElementsByClassName("text").innerHTML = currentDataset.text;
}());
</script>
</body>
</html>

kkapsner · 09. Mai 2014

Ganz so einfach ist es nicht:
Zuerst musst du natürlich das CSS ändern - also aus den "#" ein "." machen.
Dann git document.getElemenetsByClassName() eine HTMLCollection zurück (sowas ähnliches wie ein Array) und nicht ein Element, wie documen.getElementById() (beachte das fehlende "s").

Du willst also eigentlich durch alle Elemente mit der Klasse "wrapper" (da musst du auch noch die ID durch eine Klasse ersetzen) durchiterieren und für jedes Element dann ein zufälliges Bild auswählen.

Also lädst du dir alle document.getElementsByClassName("wrapper") in eine Variable und iterierst darüber. Dann holst du dir einen zufälligen Datensatz. Jetzt musst du dir noch die <a>, <img> und <span> holen die innerhalb des aktuellen .wrapper-Elements sitzen. Das kannst du über wrapperElement.getElementsByClassName("link")[0] machen - da du ja immer nur eines in jedem .wrapper hast, brauchst du da nicht iterieren.

Wenn du keine Datensatz doppelt anzeigen willst, musst du den nach jeder Iteration den ausgewählten Datensatz aus dem data-Array löschen (ARRAY.splice()).

smalltalk · 09. Mai 2014

Ok also erstmal wieder Danke.

Ich habe soweit versucht deine Angaben umzusetzen, komme aber zu keinen neuen sichtbaren Ergebnissen (evtl. merkt man schön langsam, dass mir JS nicht sehr leicht fällt

). Ich habe die IDs soweit ersetzt und den wrapper in eine variable gestellt. Bei allem weiteren habe ich das Gefühl überfordert zu sein.

HTML:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
.wrapper {
	display: inline-block;
	position: relative;
}
.wrapper #text {
	display: none;
}
.wrapper:hover #text {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: lightgray;
}
</style>
</head>
<body>
<div class="wrapper">
	<a href="" class="link">
		<img src="" class="image">
	</a>
	<div class="text"></div>
</div>
<script type="text/javascript">
(function(){
	var data = [
		{
			image: "dokumente/bilder/1semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/1. Semester/1.semester.html",
			text: "Darzustellender Text."
		},
		{
			image: "dokumente/bilder/2semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/2. Semester/2.semester.html",
			text: "Darzustellender Text."
		},
		{
			image: "dokumente/bilder/3semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/3. Semester/3.semester.html",
			text: "Darzustellender Text."
		},
		{
			image: "dokumente/bilder/4semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/4. Semester/4.semester.html",
			text: "Darzustellender Text."
		},
		{
			image: "dokumente/bilder/6semester.jpg",
			width: 250,
			height: 250,
			href: "file:///Users/konrad/Desktop/Kartomedia%20Website/studienarbeiten/6. Semester/6.semester.html",
			text: "Darzustellender Text."
		}
	];
	
	var currentDataset = data[Math.floor(Math.random() * data.length)];
	var wrapper = [ "link", "image", "text" ];
	document.getElementsByClassName("wrapper");
	wrapperElement.getElementsByClassName("link")[0].href = currentDataset.href;
	wrapperElement.getElementsByClassName("image")[0].src = currentDataset.image;
	wrapperElement.getElementsByClassName("image")[0].width = currentDataset.width;
	wrapperElement.getElementsByClassName("image")[0].height = currentDataset.height;
	wrapperElement.getElementsByClassName("text")[0].innerHTML = currentDataset.text;
}());
</script>
</body>
</html>

kkapsner · 09. Mai 2014

Im CSS musst du das "#text" auch noch durch ".text" ersetzen.

Dann musst du im HTML natürlich noch so viele .wrapper-Elemente anlegen, wie du Bilder angezeigt haben willst.

Dann wollen wir mal nicht so sein:

Code:

	Array.prototype.forEach.call(document.getElementsByClassName("wrapper"), function(wrapper){
		var currentDataset = data[Math.floor(Math.random() * data.length)];
		
		wrapper.getElementsByClassName("link")[0].href = currentDataset.href;
		var img = wrapper.getElementsByClassName("image")[0];
		img.src = currentDataset.image;
		img.width = currentDataset.width;
		img.height = currentDataset.height;
		wrapper.getElementsByClassName("text")[0].innerHTML = currentDataset.text;
	});

- lesen, verstehen, verwenden.

smalltalk · 12. Mai 2014

Super, vielen Dank.

gelesen, verstanden, verwendet.

Übrigens ist bei

HTML:

...Array.prototpye.forEach.call...

ein kleiner Rechtschreibfehler. Ansonsten funktioniert alles (falls es wer weiter verwendet möchte)

kkapsner · 12. Mai 2014

Bitte - gern geschehen.

Tippfehler ist oben korrigiert...

[FRAGE] Mouseover, statt Bild, Text

smalltalk

New member

rico2009

Guest

kkapsner

Super Moderator

smalltalk

New member

kkapsner

Super Moderator

smalltalk

New member

kkapsner

Super Moderator

smalltalk

New member

kkapsner

Super Moderator

smalltalk

New member

kkapsner

Super Moderator

smalltalk

New member

kkapsner

Super Moderator