Mit Java Bilder in HTML erklären. Wie gehts?

P@trick · #1 (**permalink**) 09.08.2006, 21:37

Hallo

Ich habe folgendes Problem und zwar plane ich in den HTML Code ein Java Script (oder so kenn mich mit Java leider überhaupt nicht aus!) einzubinden, welches eine erklärung abgibt wenn man über ein bestimmtes Icon fährt. Hier mal als Beispiel wie ich mir das vorstelle:

So wenn man nun mit der Maus über ein Icon fährt, im Beispiel das Haus, dann soll in der nächsten Zeile der Erkläungstext stehen. Beispiel:

Hier der HTML Code von den ersten Screenshot:

Code:

<table>
<tr>
<td><a href="$settings[bburl]/usercp.php"><img src="$theme[imgdir]/welcomeblock/usercp.gif" alt="$lang->welcome_usercp"/></a></td>
<td>$admincplink</td>
<td><a href="$settings[bburl]/member.php?action=logout&amp;uid=$mybbuser[uid]"><img src="$theme[imgdir]/welcomeblock/logout.gif" alt="$lang->welcome_logout"/></a></td>
</tr>
<tr colspan="3">
<td>>></td>
</tr>
</table>

Bitte denkt daran, dass ich keine Erfahrung mit Java hab, wenn ihr mir erklärt wie ich das machen soll...

heiko_rs · #2 (**permalink**) 09.08.2006, 21:54

Da die Bilder verlinkt sind, geht es sogar per CSS (das ist eh die schönere Lösung, da auch bei deaktivierten JS möglich): http://xhtmlforum.de/41078-mit-maus-...link-dann.html

P@trick · #3 (**permalink**) 10.08.2006, 00:01

danke

Schön das es so einfach per CSS geht. Hat IE damit probleme?

Edit: Im IE scheints nicht zu gehen. Der macht um die entsprechenden Icons nen blauen Rahmen. Kann man da irgendwas drehen, dass es doch geht?

heiko_rs · #4 (**permalink**) 10.08.2006, 00:48

Zitat:

Zitat von P@trick

Hat IE damit probleme?

Letztlich nicht (nicht einmal der IE 5.0), man muß ihn nur ggf. etwas "überlisten" (wie so oft), damit er die hover-Inhalte anzeigt. Wenn Du's im Firefox hingekriegt hast und der IE noch nichts anzeigt, poste einfach nochmal.

Zitat:

Zitat von P@trick

Im IE scheints nicht zu gehen. Der macht um die entsprechenden Icons nen blauen Rahmen.

Um die verlinkten Grafiken? Das ist default, gib ihnen (d.h. img) einfach border: none;.

P@trick · #5 (**permalink**) 10.08.2006, 00:59

Weder im IE noch im Firefox kommt der gewünschte Text mit folgenden html code:

Code:

<style type="text/css">
a span {
	display: none;
	}
	
a:hover span {
**display: block;
**position: absolute;
	left: 7%;
	top: 28%;
	}
</style>

<table>
<tr>
<td><a href="$settings[bburl]/usercp.php"><img src="$theme[imgdir]/welcomeblock/usercp.gif" alt="$lang->welcome_usercp"/>
<span>$lang->welcome_usercp</span></a></td>
<td>$admincplink</td>
<td><a href="$settings[bburl]/member.php?action=logout&amp;uid=$mybbuser[uid]"><img src="$theme[imgdir]/welcomeblock/logout.gif" alt="$lang->welcome_logout"/>
<span>$lang->welcome_logout</span></a></td>
</tr>
<tr colspan="3">
<td>>></td>
</tr>
</table>

Ansonsten stehe ich noch vor den problem, dass ich den Text gern an einer bestimmten Stelle auf der Seite hätte, diese aber wenn ich die größe des Broswer variiere sich auch mitändern soll, so dass sie genau unter den icons ist.

heiko_rs · #6 (**permalink**) 10.08.2006, 02:00

Zitat:

Zitat von P@trick

Code:

a:hover span {
**display: block;
**position: absolute;
left: 7%;
top: 28%;
}

Das rot markierte muß raus

Zitat:

Zitat von P@trick

dass ich den Text gern an einer bestimmten Stelle auf der Seite hätte, diese aber wenn ich die größe des Broswer variiere sich auch mitändern soll, so dass sie genau unter den icons ist.

Du kannst einem Element, das span übergeordnet ist (z.B. a oder td), ein position: relative; geben und das span dann an diesem absolut ausrichten (pixelgenau, nicht mit Prozent).

In der Entwicklungsphase würde ich das Ganze übrigens ohne PHP machen; nicht, daß sich evtl. von dieser Seite mal unbemerkt ein Fehler einschleicht.

xm22 · #7 (**permalink**) 10.08.2006, 08:01

Nur der Richtigkeit halber:

Javascript hat nix mit Java an sich zu tun

P@trick · #8 (**permalink**) 10.08.2006, 12:03

Ich hab grad nochmal nachgeschaut und die Sternchen wahren garnicht bei mir im Code. Es sah also so aus:

Code:

<style type="text/css">
a span {
display: none;
}
	
a:hover span {
display: block;
position: absolute;
left: 7%;
top: 28%;
}
</style>

Wie gesagt IE und FF können damit irgendwie nix anfangen.

Ich hab auch schonmal probiert für den Span ne Extra Zeile aufzumachen, aber dann wurde es in Opera angezeigt, als wäre es ein ganz normaler Link und es wurde nicht verdeckt.

heiko_rs · #9 (**permalink**) 10.08.2006, 13:21

Kannst Du mal einen kompletten Code posten, so wie er ausgegeben wird? (ungeparstes PHP hilft wenig.)

P@trick · #10 (**permalink**) 10.08.2006, 15:33

Das Problem ist, dass es sich hier um die Forensoftware MyBBoard handelt und ich halt nur den html Code und den CSS Style anpassen kann.

Der PHP Code bezieht sich halt auf die Links und auf die Beschreibung der Links (in den language Ordnern).

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

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bilder in Namibia CSS ändern-wie?	Harderman	CSS	0	05.03.2009 10:40
DIV immer ganze Breite - normal?!?!?	csski	CSS	3	02.07.2008 12:20
Wie parse ich mit php Markdown syntax nach html?	asdfgqw	Serveradministration und serverseitige Scripte	0	03.06.2008 00:11
Ebay vs. HTML und CSS	Takko	CSS	2	02.03.2008 19:07
Texte mit margin:auto - Bilder mit margin:0	AndreasB	(X)HTML	11	10.10.2006 13:50