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

toffifeemonster · 26. Mai 2010

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

Zeroflow · 26. Mai 2010

es geht leider nur mit JS, und das is leider immer kompliziert...

vl. gibts aber irgendein CMS dass das integriert hat

toffifeemonster · 26. Mai 2010

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

GindaiWoritas · 26. Mai 2010

http://webmatze.de/wirklich-einfache-javascript-tooltips/

google "javascript tooltip" erster treffer

toffifeemonster · 26. Mai 2010

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 · 26. Mai 2010

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 · 26. Mai 2010

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">

</script>

Es ist wirklich wichtig bitte

mfg toffifeemonster

HansDampf38 · 26. Mai 2010

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 · 26. Mai 2010

Danke dir

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. · 26. Mai 2010

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 · 26. Mai 2010

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 (26. Mai 2010)

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

Mark.G. · 26. Mai 2010

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

Danke für die info.

FF,Opera und Chrome gehts 100%, Safari normal auch (da webkit), wer IE noch verwendet ist selbst schuld

(ich weiß^^, gibt leider noch sehr viele).

PS: alle die IE noch verwenden hf ab HTML 5 ---> http://html5demos.com/

toffifeemonster · 27. Mai 2010

@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

toffifeemonster · 29. Mai 2010

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 · 29. Mai 2010

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 · 29. Mai 2010

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 · 29. Mai 2010

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 · 29. Mai 2010

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

HansDampf38 · 29. Mai 2010

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 · 29. Mai 2010

Also die list ist schon erstellt worden

Und ja WordPress ist ein Blogsystem

Ist das möglich

mfg toffifeemonster

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

Cadet 4th Year

Anhänge

Commander

Cadet 4th Year

GindaiWoritas

Gast

Cadet 4th Year

Commander

Cadet 4th Year

Lt. Junior Grade

Cadet 4th Year

Ensign

Lt. Junior Grade

Ensign

Cadet 4th Year

Anhänge

Cadet 4th Year

Lt. Junior Grade

Cadet 4th Year

Lt. Junior Grade

Cadet 4th Year

Anhänge

Lt. Junior Grade

Cadet 4th Year