[HaBo]

Alexias · 28.06.06, 16:24

Hallo,

stellt euch einfach Mal folgendes vor: Drei gleiche Primär- und drei gleiche Sekundärgrafiken; drei verschiedene Textelemente.

'Normal' sollen alle Texte in der Farbe des Hintergrundes sein. Bewegt man den Cursor über eine Grafik, soll jene in die Sekundärgrafik 'wandeln' und der dazugehörige Text ändert seine Farbe. Klickt man auf die Sekundärgrafik, soll sie komplett ausgetauscht werden (nicht nur temporär) und der Text behält die neue Farbe. Klickt man nicht und bewegt einfach zurück, wandelt die Grafik zur alten und der Text verliert seine Sichtbarkeit. Es soll immer nur ein Grafik- und Textpaar 'aktiviert' werden können.

Ist das möglich? (:

v01d · 28.06.06, 16:33

mit CSS

Anzeige

- Anzeige -

LX · 28.06.06, 16:37

Sollte sowohl mit den CSS-Pseudoklassen :hover und :active möglich sein, als auch mit JavaScript. Die Grafiken würde ich einfach als Hintergrundbilder des Textelements definieren.

Alexias · 29.06.06, 16:15

kann man den :hover - Effekt auch für reinen Text verwenden?

Xalon · 29.06.06, 16:18

Probiers halt einfach aus -.-
Und ja es geht!

Alexias · 29.06.06, 16:36

Also t:hover (ausgedacht) funktioniert nicht.
Da muss es wohl eine mir unbekannte Funktion geben. Nein, google half mir nicht.

LX · 29.06.06, 16:56

Je nach Browser funktioniert :hover für beliebige Elemente. span:hover sollte in Mozilla kein Problem sein, der IE wird's vermutlich aber nur auf Links akzeptieren.

Alexias · 29.06.06, 18:59

Code:

<span class="rollover"><a href="javascript:;"> ... </a></span>

funktioniert. wird aber wie ein Verweis behandelt...

Zwirni · 30.06.06, 00:11

Geht mittels JavaScript in 95% der Browser. Habs mal aus einem meiner Projekte zusammenkopiert:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function setpic(link,text,pic,content)
{
 document.getElementById(link).src=pic;
 document.getElementById(text).firstChild.nodeValue=content;
}
</script>
</head>
<body>
<a href="abc" title="" onmouseover="setpic('bild1','text1','bild2.gif','neuer Text');" onmouseout="setpic('bild1','text1','bild1.gif','alter Text');"><img src="bild1.gif" alt="" id="bild1" style="width: 50px;height: 50px;padding: 10px;" /><br /><span id="text1">alter Text</span></a>
</body>
</html>

Alexias · 30.06.06, 13:09

...ist ja auch ein Verweis... o.ô

sheepd · 30.06.06, 13:19

Hast du denn mal probiert das selbst für ein anderes Element umzuschreiben?
Mit JS gehts auch für alles andere, nicht nur für Links.

Alexias · 01.07.06, 12:11

Joa... ich und Java *lach*

Vielleicht irgendwann einmal... wenn ich HTML vollständig beherrsche... (;

bled · 01.07.06, 15:52

Zitat:

Original von Alexias
Joa... ich und Java *lach*

Bitte, bitte, bitte:

Zitat:

Trotz des ähnlichen Namens und einer ähnlichen Syntax ist JavaScript grundlegend verschieden von der Programmiersprache Java, das von Sun Microsystems stammt. Die Namensgleichheit erklärt sich vor allem aus Marketinggründen und den damals sehr populären Java-Applets. Die Syntax wurde auch aus diesem Grund weitgehend der von Java angeglichen. JavaScript setzt im Gegensatz zu Java und anderen klassisch objektorientierten Sprachen aber keine Klassen ein, sondern verwendet stattdessen Objekte als Prototypen.

Quelle: http://de.wikipedia.org/wiki/JavaScript

Alexias · 03.07.06, 18:43

Danke, bled! (:

Anzeige

- Anzeige -

28.06.06, 16:24	#1 (permalink)
Alexias Registriert seit: 12.03.05 Likes: 0	Eigenartige Ideen... Anzeige Hallo, stellt euch einfach Mal folgendes vor: Drei gleiche Primär- und drei gleiche Sekundärgrafiken; drei verschiedene Textelemente. 'Normal' sollen alle Texte in der Farbe des Hintergrundes sein. Bewegt man den Cursor über eine Grafik, soll jene in die Sekundärgrafik 'wandeln' und der dazugehörige Text ändert seine Farbe. Klickt man auf die Sekundärgrafik, soll sie komplett ausgetauscht werden (nicht nur temporär) und der Text behält die neue Farbe. Klickt man nicht und bewegt einfach zurück, wandelt die Grafik zur alten und der Text verliert seine Sichtbarkeit. Es soll immer nur ein Grafik- und Textpaar 'aktiviert' werden können. Ist das möglich? (:

28.06.06, 16:37	#3 (permalink)
LX Moderator Registriert seit: 14.02.06 Likes: 21	Sollte sowohl mit den CSS-Pseudoklassen :hover und :active möglich sein, als auch mit JavaScript. Die Grafiken würde ich einfach als Hintergrundbilder des Textelements definieren. __________________ "Ever tried. Ever failed. No matter. Try again. Fail again. Fail better." - Samuel Beckett JS BB LX UP

29.06.06, 16:56	#7 (permalink)
LX Moderator Registriert seit: 14.02.06 Likes: 21	Je nach Browser funktioniert :hover für beliebige Elemente. span:hover sollte in Mozilla kein Problem sein, der IE wird's vermutlich aber nur auf Links akzeptieren. __________________ "Ever tried. Ever failed. No matter. Try again. Fail again. Fail better." - Samuel Beckett JS BB LX UP

29.06.06, 18:59	#8 (permalink)
Alexias Themenstarter Registriert seit: 12.03.05 Likes: 0	Code: <span class="rollover"><a href="javascript:;"> ... </a></span> funktioniert. wird aber wie ein Verweis behandelt...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

28.06.06, 16:33	#2 (permalink)
v01d Registriert seit: 30.05.05 Likes: 0	mit CSS

29.06.06, 16:15	#4 (permalink)
Alexias Themenstarter Registriert seit: 12.03.05 Likes: 0	kann man den :hover - Effekt auch für reinen Text verwenden?

29.06.06, 16:18	#5 (permalink)
Xalon Registriert seit: 23.05.05 Likes: 0	Probiers halt einfach aus -.- Und ja es geht!

29.06.06, 16:36	#6 (permalink)
Alexias Themenstarter Registriert seit: 12.03.05 Likes: 0	Also t:hover (ausgedacht) funktioniert nicht. Da muss es wohl eine mir unbekannte Funktion geben. Nein, google half mir nicht.

30.06.06, 13:09	#10 (permalink)
Alexias Themenstarter Registriert seit: 12.03.05 Likes: 0	...ist ja auch ein Verweis... o.ô

30.06.06, 13:19	#11 (permalink)
sheepd Registriert seit: 15.10.04 Likes: 0	Hast du denn mal probiert das selbst für ein anderes Element umzuschreiben? Mit JS gehts auch für alles andere, nicht nur für Links.

01.07.06, 12:11	#12 (permalink)
Alexias Themenstarter Registriert seit: 12.03.05 Likes: 0	Joa... ich und Java lach Vielleicht irgendwann einmal... wenn ich HTML vollständig beherrsche... (;

03.07.06, 18:43	#14 (permalink)
Alexias Themenstarter Registriert seit: 12.03.05 Likes: 0	Danke, bled! (:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Eigenartige Handy- und Telefon-Phänomene	nzc	Mobile Geräte/Smartphones	19	11.02.09 23:38
Ideen für Programming Contest	Serow	Code Kitchen	7	01.08.08 17:51
Ideen für Präsentation	Serow	Off topic-Zone	6	11.06.08 19:12
Suche Ideen	julack91	(Web-) Design und webbasierte Sprachen	17	14.02.07 19:00
geburtstagsgeschenk-ideen	ivegotmail	HaBo Lounge	13	12.08.05 00:19

[HaBo]

Eigenartige Ideen...