HTML [S]Code für Tooltip mit Bild.

toffifeemonster

Cadet 4th Year
Dabei seit
Mai 2010
Beiträge
119
Hi,
Also ich würde für meine Homepage gerne einen Tooltip "einbauen" und zwar habe ich es mir so vorgestellt wenn ich mit der maus über den link fahre soll sich ein kleines fenster öffnen mit einem Bild!
So ca. wie im Anhang.
Google wurde von mit schon gefragt allerdings ist mir das alles dort zu kompliziert :(
Hoffe das es mir einer von euch erklären könnt da ich (fast) keine Erfahrung in HTML habe!

mfg toffifeemonster
 

Anhänge

Zeroflow

Lt. Commander
Dabei seit
Juli 2006
Beiträge
1.868
es geht leider nur mit JS, und das is leider immer kompliziert...

vl. gibts aber irgendein CMS dass das integriert hat
 

toffifeemonster

Cadet 4th Year
Ersteller dieses Themas
Dabei seit
Mai 2010
Beiträge
119
Also würde dies gerne in Wordpress artiklen einbinden damals auf blogger habe ich den effekt mit einen 2 zeiligen code geschafft nur finde ich den nicht mehr ):

mfg toffifeemonster
 

toffifeemonster

Cadet 4th Year
Ersteller dieses Themas
Dabei seit
Mai 2010
Beiträge
119
Ich weis das klingt blöd doch das ist mir auch zu kompliziert wäre einer vl. so nett und könnte mir so einen code reinkopieren nach dem schema:
........Bildlink.jpg......Breite.....Höhe.......name des links.......weiterführen zu.....
Also so in der Art :)

mfg toffifeemonster
 

Zeroflow

Lt. Commander
Dabei seit
Juli 2006
Beiträge
1.868
tut mir leid, gibts leider nich

aber auf der seite von gindai steht alles super toll beschrieben, einfach das durchlesen, dann kapierst dus wsl. und weißt auch in zukunft wie das funktioniert
 

toffifeemonster

Cadet 4th Year
Ersteller dieses Themas
Dabei seit
Mai 2010
Beiträge
119
Ich checks einfach nicht habe jeglich variation ausprobiert nie klappt es ....
Ok das ist der ganze Code doch wo soll ich da einen bilderlink einfügen oder andere links zu den es weiterleiten soll ?

<script type="text/javascript">
<!--
wmtt = null;
document.onmousemove = updateWMTT;
function updateWMTT(e) {
if (wmtt != null) {
x = (document.all) ? window.event.x + wmtt.offsetParent.scrollLeft : e.pageX;
y = (document.all) ? window.event.y + wmtt.offsetParent.scrollTop : e.pageY;
wmtt.style.left = (x + 20) + "px";
wmtt.style.top = (y + 20) + "px";
}
}
function showWMTT(id) {
wmtt = document.getElementById(id);
wmtt.style.display = "block"
}
function hideWMTT() {
wmtt.style.display = "none";
}
// -->
</script>

Es ist wirklich wichtig bitte:)

mfg toffifeemonster
 

HansDampf38

Lt. Junior Grade
Dabei seit
Jan. 2008
Beiträge
381
So, hab mir das mal angeschaut.

Gut, wenn man sich garnicht auskennt, kann eine Erklärung noch so gut sein, es bleiben böhmische Dörfer ;)

Hier mal der Teil, der für den Tooltip verantwortlich ist... und für dich vermutlich unwichtig.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta  http-equiv="Content-type" content="text/html; charset=iso-8859-1"  name="Grundgerüst" />
<title>Grundgerüst</title>


<style type="text/css">
.tooltip 
{ 
position: absolute; 
display: none; 
background-color: 
#FFFFFF; 
} 
</style>

<script type="text/javascript"> 
<!-- 
wmtt = null; 
document.onmousemove = updateWMTT;
function updateWMTT(e) { 

if (wmtt != null) {
x = (document.all) ? window.event.x + wmtt.offsetParent.scrollLeft : e.pageX; 
y = (document.all) ? window.event.y + wmtt.offsetParent.scrollTop : e.pageY; 
wmtt.style.left = (x + 20) + "px";
wmtt.style.top = (y + 20) + "px";
} 
} 
function showWMTT(id) { 
wmtt = document.getElementById(id); 
wmtt.style.display = "block" 
} 
function hideWMTT() { 
wmtt.style.display = "none";
} 
// --> 
</script>

</head>
Hier der Teil wo du nun ins Spiel kommst:

Code:
<body>


<div id="1" class="tooltip"><img src="ithaka.jpg" /></div>

<a onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#">
Unser Link
</a>

</body>
</html>
Und dort sind 2 Dinge für dich von Interesse:

1. id 1... dort steht das was du als Tooltip haben willst, sei es nun Text oder wie in dem Fall ein Bild

2. der Link wo das ganze passieren soll und womit. Die 1 in der Klammer von "showWMTT" bezieht sich auf die id 1

Wenn du jetzt also einen weiter Tooltip willst... einfach das ganze kopieren und id 2 nehmen usw.

Hoffe is nun klar ?

Gruß

HD
 

toffifeemonster

Cadet 4th Year
Ersteller dieses Themas
Dabei seit
Mai 2010
Beiträge
119
Danke dir :D
Genau sowas habe ich gemeint :)
Bloss gibt es noch was kleines was nervt ^^ also wenn ich die seite betrete erscheint das bild gleich ohne das ich mit der maus rüberfahre und ERST wenn ich mit der maus auf den link rüberfahre geht das bild weg und der mouseover erscheint hoffe du verstehst was ich meine und könnte man noch irgendwo die grösse des bildes festlegen ?

mfg toffifeemonster
 

Mark.G.

Ensign
Dabei seit
Okt. 2008
Beiträge
249
geht auch mit css

kleines preview des codes: http://kzs.net84.net/tooltip/

HTML CODE
Code:
<html>
	<head>
		<title>Title</title>
		<style type="text/css">
		@import url("style.css") screen;
		</style>
	</head>
	<body>
   		<a class="menu tooltip">News<span><img src="bullet.png" border="0" alt="bild">Hier steht Text</span></a>
<br />
		<a class="menu tooltip" target="mainpage" href="hiergehtshin.html">ich bin noch dazu ein link<span><img src="bullet.png" border="0" alt="bild">Hier steht noch ein Text</span></a>
	</body>
</html>
CSS Code
Code:
/* Tooltip */
a.tooltip span
{
	display:none;  /*display legt fest, wie ein Element angezeigt werden soll / z.B: none, inline, block, table etc...*/
	padding:2px 3px; /*Kurzform zur Angabe der vier Innenabstände*/
	margin-left:0px; /*Außenabstand (oben, rechts, unten, links)*/
	margin-top: 10px; /*Außenabstand (oben, rechts, unten, links)*/
	width:100px;
}
a.tooltip:hover span
{
	display:inline;  /*display legt fest, wie ein Element angezeigt werden soll / z.B: none, inline, block, table etc...*/
	position:absolute; /*Bestimmt die Art, wie die Positionsangaben verwendet werden. / absolute, relative, fixed*/
	background:#ffffff; 
	border:1px solid #cccccc; /*border-top: Angaben Breite (border-width), Art (border-style) und Farbe (border-color)*/
	color:#6c6c6c;
}
/* Tooltip end */
 

HansDampf38

Lt. Junior Grade
Dabei seit
Jan. 2008
Beiträge
381
Da das Script so sowohl im IE 8, wie auch FF 3.6 funktioniert, würde ich spontan mal sagen das du mal die Schreibweise prüfen solltest. Dabei ist es auch wichtig auf Groß- und Kleinschreibung zu achten. In HTML ist das egal, aber in Javascript nicht.

Gruß

HD
Ergänzung ()

Funktioniert mit deinem CSS aber nur im FF und nicht im IE.
 

Mark.G.

Ensign
Dabei seit
Okt. 2008
Beiträge
249
Zuletzt bearbeitet:

toffifeemonster

Cadet 4th Year
Ersteller dieses Themas
Dabei seit
Mai 2010
Beiträge
119
@Mark.G.
Also ich habe diesen code mal in Wordpress reingeschrieben:
Code:
<html>
	<head>
		<title>Title</title>
		<style type="text/css">
		@import url("style.css") screen;
		</style>
	</head>
	<body>
   		<a class="menu tooltip">News<span><img src="bullet.png" border="0" alt="http://i50.tinypic.com/i5b38n.jpg">Hier steht Text</span></a>
<br />
		<a class="menu tooltip" target="mainpage" href="www.google.de">ich bin noch dazu ein link<span><img src="bullet.png" border="0" alt="bild">Hier steht noch ein Text</span></a>
	</body>
</html>
Könnt ihr mir bitte sagen was ich da falsch gemacht habe ?
Bin mir sicher das ich mehreres falsch gemacht habe :(
Siehe Anhang so sieht es dann bei mir aus ...

mfg toffifeemonster
 

Anhänge

Zuletzt bearbeitet:

toffifeemonster

Cadet 4th Year
Ersteller dieses Themas
Dabei seit
Mai 2010
Beiträge
119
Kann mir keiner da helfen?
Biete den jenigen der mir das SCHAFFT eine kleine Spende per PayPal an oder free Premium Acc bei rapidshare oder uploaded (1 monat) ist wirklich wichtig :S

mfg toffifeemonster
 

HansDampf38

Lt. Junior Grade
Dabei seit
Jan. 2008
Beiträge
381
Mal nicht gleich mit dem Geld umsich werfen, is ja kein Basar hier ;)

Erstmal die Frage, hast du es mit dem Javascript noch mal probiert ? Denn wie ich geschrieben habe, funktioniert die CSS-Variante im IE eh nicht.

Dann wäre es nicht verkehrt, das du mal den kompletten Code postest... oder vielleicht mal was du hast hochlädst und nen Link zeigst, das man sich das direkt anschauen kann.

Gruß

HD
 

toffifeemonster

Cadet 4th Year
Ersteller dieses Themas
Dabei seit
Mai 2010
Beiträge
119
Meinst du mit "deinen" code da oben?
Da weis ich nicht wo ich die links und bilder hinzufügen soll :S
Und klappt sowas überhaupt mit Wordpress?

mfg toffifeemonster
 

HansDampf38

Lt. Junior Grade
Dabei seit
Jan. 2008
Beiträge
381
Ooook, fangen wir mal klein an;)

Was hast du bereits ?
Ist deine Homepage schon Online ?
Falls ja und sie nicht Geheim bleiben soll, stell mal den Link rein

Was wilst du ? Ein Tooltip... Ok... wie und wo genau ?

Hast du ein Bild, ein Text... oder viele Tooltips ?

Was kannst du... ausser mit Wordpress rumhantieren ?

Und... nach Douglas Adams... KEINE PANIK... dann klappt das schon:)

Gruß

HD
 

toffifeemonster

Cadet 4th Year
Ersteller dieses Themas
Dabei seit
Mai 2010
Beiträge
119
Also würde ganz gerne wollen das die HomePage "geheim" bleibt!
Ist seit Monaten Online!
Habe mal einen Auszug von einer anderen Homepage als Anhang hinzugefügt wie ich es mir vostellen würde :)
Siehe anhang möchte das wenn man mit der Maus über einen der Links fährt das dann ein Bild erscheint :)
Grosse erfahrungne habe ich nicht mit HTML usw. :(

mfg toffifeemonster
 

Anhänge

HansDampf38

Lt. Junior Grade
Dabei seit
Jan. 2008
Beiträge
381
Hmm... Ok.

Also...

... erstmal würde ich bei der Javascript- Variante bleiben.

Deine "Liste" bei denen dann ein Tooltip kommen soll, hast du schon in Wordpress erstellt ?

Wobei ich mich frage... ist Wordpress nich das Blogsystem ? Kannst du da sowas überhaupt machen ?
 

toffifeemonster

Cadet 4th Year
Ersteller dieses Themas
Dabei seit
Mai 2010
Beiträge
119
Also die list ist schon erstellt worden :)
Und ja WordPress ist ein Blogsystem :D
Ist das möglich :(

mfg toffifeemonster
 
Top