zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Mit Java Bilder in HTML erklären. Wie gehts?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.08.2006, 22:37
Benutzerbild von P@trick
Design Igel
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2006
Beiträge: 20
P@trick befindet sich auf einem aufstrebenden Ast
Standard Mit Java Bilder in HTML erklären. Wie gehts?

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...
Angehängte Grafiken
Dateityp: jpg Unbenannt-1.jpg (2,2 KB, 23x aufgerufen)
Dateityp: jpg Unbenannt-2.jpg (2,8 KB, 21x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.08.2006, 22:54
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.08.2006, 01:01
Benutzerbild von P@trick
Design Igel
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2006
Beiträge: 20
P@trick befindet sich auf einem aufstrebenden Ast
Standard

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?

Geändert von P@trick (10.08.2006 um 01:40 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 10.08.2006, 01:48
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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;.
Mit Zitat antworten
  #5 (permalink)  
Alt 10.08.2006, 01:59
Benutzerbild von P@trick
Design Igel
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2006
Beiträge: 20
P@trick befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 10.08.2006, 03:00
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.

Geändert von heiko_rs (10.08.2006 um 03:02 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 10.08.2006, 09:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard

Nur der Richtigkeit halber:

Javascript hat nix mit Java an sich zu tun
__________________
... Meine Meinung
Mit Zitat antworten
  #8 (permalink)  
Alt 10.08.2006, 13:03
Benutzerbild von P@trick
Design Igel
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2006
Beiträge: 20
P@trick befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von P@trick (10.08.2006 um 13:07 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 10.08.2006, 14:21
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Kannst Du mal einen kompletten Code posten, so wie er ausgegeben wird? (ungeparstes PHP hilft wenig.)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 10.08.2006, 16:33
Benutzerbild von P@trick
Design Igel
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2006
Beiträge: 20
P@trick befindet sich auf einem aufstrebenden Ast
Standard

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).
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Zwei Bilder nebeneinander, sollen kleiner werden! cecyle CSS 1 12.01.2014 19:20
3 Bilder in die Gleiche IMG HTML einbauen wegen Responsive Design. hakura CSS 4 03.12.2013 12:49
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße Spencer Javascript & Ajax 3 19.09.2012 00:16
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
per jquery flash entfernen und html anzeigen lassen destroy90210 Javascript & Ajax 2 02.01.2010 18:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:31 Uhr.