| von c3o |
Hier mal eins das ich geschrieben habe.. sicher nicht perfekt, aber immerhin.
Es bewegt sich nicht mit der Maus mit wie auf der Beispielsseite, sondern ist nur wie ein Tooltip, der aber sofort erscheint, andere Farben hat, und auch HTML beeinhalten kann.
Getestet auf Mozilla 1, IE 6/win und Opera 7. Im N4 wirds net funktionieren.
Hab das nur schnell aus der Seite rauskopiert, sag wenns Probleme gibt.
<script type="text/javascript">
function kastl_her(wasdrin) {
if (document.getElementById) {
pop = document.getElementById('popupinfo');
//screen width
if (document.all) { var breite = document.body.clientWidth; var hoehe = document.body.clientHeight; }
else { var breite = window.innerWidth; var hoehe = window.innerHeight; }
if (document.all) {
var ieBox = document.compatMode != "CSS1Compat";
var cont = ieBox ? document.body : document.documentElement;
mouseY += cont.scrollTop;
}
var coordx = mouseX + 10;
var coordy = mouseY + 10;
if((coordx + pop.offsetWidth) > breite) { coordx = breite - pop.offsetWidth - 10; }
pop.style.left= coordx + 'px'; pop.style.top= coordy + 'px';
pop.innerHTML=wasdrin;
pop.style.display='block';
}
}
function saveMouseCoords (e) {
if (window.Event) { // Netscape
mouseX = e.pageX; mouseY = e.pageY;
} else { // MSIE
mouseX = window.event.clientX; mouseY = window.event.clientY;
}
}
if (document.captureEvents) {
document.captureEvents (Event.MOUSEMOVE);
document.onmousemove = saveMouseCoords;
}
function kastl_weg() {
if(document.getElementById) {
document.getElementById('popupinfo').style.display='none';
document.getElementById('popupinfo').innerHTML='';
}
}
</script>
... </head> ...
<!-- das hier ist ganz wichtig -->
<div id="popupinfo" style="position:absolute;display:none;width:300px;color:#000;background-color:#648CE3;border:1px solid #9eb9f2;padding:5px;"></div>
<!-- und so zeigst du es an -->
<a href="javascript:void(0)" onmouseover="kastl_her('Hier der zu erscheinende <b>Popup-Text!</b>')" onmouseout="kastl_weg()">Maus mich over!</a>
- - - -
Nachtrag: Farben/Linien und so stellst du im style-Attribut vom Popup-div unten ein. Wenn das von Tooltip zu Tooltip verschieden sein soll, machst du folgendes:
...
function kastl_her(wasdrin, textfarbe, hgfarbe, linienfarbe) {
...
pop.style.left= coordx + 'px'; pop.style.top= coordy + 'px';
pop.style.color= textfarbe; pop.style.backgroundColor= hgfarbe; pop.style.borderColor= linienfarbe;
...
<a href="javascript:void(0)" onmouseover="kastl_her('Hier der zu erscheinende <b>Popup-Text!</b>', '#000000', '#FF0000','#000000')" onmouseout="kastl_weg()">Maus mich over!</a>
|
| von nillin |
nochmal der link
 |
| von nillin |
hi leute,
schaut euch mal folgende seite an http://www.konsum-dresden.de/markthalle-dresden/rundgang/ru.htm
dort gibt es einen mouseover effekt, wenn man auf die karte geht! sehr hübsch, aber die script ist mit zu groß! ist 41 kb!!!
hat jemand ein ähnliches script, wo man farben/bg/linien einstellen kann, welches aber etwas kleiner ist?????????
danke für tipps!!! |
|
