onmousehover über Bild - Text anzeigen

**edorius** · 12.01.2011 17:14

Hi,
ich würde gern auf einer Website(joomla 1.5x) ein modul installieren,also eins bei dem man eine eigenen html code eingeben kann.(mod_custom)

Ich hab mir das so vorgestellt:

Das Bild wird angezeigt und wenn man mit der maus darüber fährt erscheint ein fenster,nich größer als 400x400px in dem das bild nochmal abgebildet ist und dazu informationen,wie z.b. das genre einer musik cd oder so^^

ich hab auch schon einen code,aber das klappt nich so wie ich mir das vorstelle^^

PHP-Code:


<a href="Link zu Beitrag" onMouseOver="showhint('<font color=#616161><b>TEXT</b></font><br><img style="margin-top:2px;margin-bottom:2px" src="LINK ZU CD COVER" width="27"'><br><font color=#323232><font size=1pxl><b>Genre:</b> House<br></font></font>',this,event,'272px')">

wenn ich mir das nun anzeigen lasse,dann seh ich das cover und daneben steht

PHP-Code:


Genre: House',this,event,'272px)">

hat jemand eine ahnung wie ich das problem lösen könnte?

**Harmageddon** · 12.01.2011 17:17

HTML-Code:

<a href="Link zu Beitrag" onmouseover="showhint('<font color=#616161><b>TEXT</b></font><br><img style=&quot;margin-top:2px;margin-bottom:2px&quot; src=&quot;LINK ZU CD COVER&quot; width=&quot;27&quot;')"><br><font color=#323232><font size=1pxl><b>Genre:</b> House<br></font>

Meintest du es vielleicht so? Der Browser kann sich nicht in dich hineinversetzen, deshalb brauchst du verschiedene Arten von Anführungszeichen. Und die onmouseover-Funktion war auch nicht richtig beendet.

**edorius** · 12.01.2011 18:20

danke für die schnelle antwort,

ich hab mal den code so eingefügt. jetzt seh ich das bild,der text steht bereits da und erscheint nicht erst per onmouseover...

gibt es vllt noch ne andere lösung?

muss ja nicht von meinem code ausgehen

einfach das ich per onmouseover ein feld sehe,wo text+cover zu sehen ist

**Harmageddon** · 12.01.2011 19:02

Ich weiß nicht, was da jetzt alles reinsoll und kann dir auch nicht alles vorkauen, aber so sollte es doch eigentlich funktionieren:

HTML-Code:

<a href="seite" onmouseover="showhint('hier kommt der code rein, der beim hovern angezeigt werden soll. anführungszeichen durch &quot; ersetzen!')">blubb</a>

**edorius** · 13.01.2011 09:44

also das klappt alles nicht richtig,ich seh das bild und daneben den text...

sone art tooltip wie im joomla-backend würde auch reichen,also wenn man im backend bei einem modul z.b auf ein parameter namen mit der maus fährt,dann erscheint ein kleines gelbes textfeld...sone in der art

**Harmageddon** · 13.01.2011 15:43

Dann musst du eben eine Funktion schreiben, die dir so ein Element anzeigt und diese dann bei onmouseover aufrufen.

Und zu "klappt nicht richtig": Kannst du vielleicht einen Link zur Seite posten?

**edorius** · 13.01.2011 22:31

also hab es zumindest schonmal hinbekommen,dass ich ein tooltip habe

PHP-Code:


<center>



<a href="LINK" class="tooltip">

<img src="LINK BILD" height="100" width="100" />

<span class="info">TEXT</span>

</a>



<style type="text/css">

a.tooltip {text-decoration:none;}

.tooltip span.info{display:none;}

.tooltip:hover span.info{display:block;position:absolute; width:200px; height:200px;}

</style>



</center>

aber der tooltip wir unterhalb des bildes angezeigt.ich weiß dass es möglich ist,den tooltip an der mausposition anzuzeigen,aber wie mache ich das ?
am besten wäre es natürlich,wenn das tooltip-fenster die mausposition verfolgt

zu der frage wegen der site:
die muss hier nicht unbedingt gepostet werden

**elkuku** · 14.01.2011 15:52

<center> - nicht Dein Ernst oder ? :P

Schau mal hier:
http://docs.joomla.org/Tutorial:How_...oomla!_website

EDITH: Ganz vergessen, dass wir ja dazu auch schon etwas haben

http://wiki.joomla-nafu.de/joomla-do.../JHtml/tooltip

Fehlende Infos bitte ergänzen

**edorius** · 14.01.2011 20:21

ich zieh die alte script nochmal zurück,hab was gefunden und mir zurechtgebastelt^^

PHP-Code:


<a href="http://google.de" class="tooltip">

<img src="http://s1.directupload.net/images/101219/zxysc4qs.jpg" height="100" width="100" />

<span class="info" > <img src="http://s1.directupload.net/images/101219/zxysc4qs.jpg" height="250" width="250" /> </br></br> <b> Genre:</b> House</br> <b>  Quality:</b> 320 kbps/44.1 KHz/Joint Stereo</br> <b> Tracks:</b> Unmixed+2 Mixe (ohne Cues)</span>

</a>







<style type="text/css">

a.tooltip {text-decoration:none;}

.tooltip span.info{display:none;}

.tooltip:hover span.info{position:absolute; top:220px; left:100px; width:250px; height:325px;

      z-index:3; background-color:#ffa;}

      

      

a.tooltip {

  position: relative;

  text-decoration: none; 

  font-style:normal;

   }

  



a.tooltip span.info {

  display: none;  

  text-decoration: none; 

}



a.tooltip:hover span.info {

  display: block;

  position: absolute; 

  top: 90px; 

  left: 10; 

  width: 250px;

  z-index: 100;

  color: #000000; 

  border:1px solid #3489c8; 

  background: #ffffff;

  font: 12px Arial, sans-serif; 

  text-align: left;

  }

  

a.tooltip span b {

   color:#176096;

}

  

 </style>

im anhang ist der code in der index.html...kann per browser geöffnet werden.
bis jetzt klappt es so,wie ich es mit vorstelle...aber das joomla modul(mod_custom) zeigt mir nur das bild an,nicht dicht den tooltip ?!?
außerdem wird mein browser(opera/mozilla firefox) nicht fertig mit speichern,also wenn ich den code eingefügt habe und abspeicher.

EDIT*

hab gerade mitbekommen,dass die darstellung im firefox anders ist als in opera/google chrome?
gibts dafür ein bestimmten grund und ggf. eine lösung?

Thema: onmousehover über Bild - Text anzeigen

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

onmousehover über Bild - Text anzeigen

Lesezeichen

Lesezeichen

Berechtigungen