Hi,
Vorab ich hab bis jetzt mit Javascript nie gearbeitet es ist mein erster versuch.
Ich möchte eine Toolbox realisieren, die über ein Klick geöffnet wird. Für eine MouseOver Toolbox würde ich reines CSS verwenden da ich dieser aber über ein Click steuern möchte, bin ich auf JS angewiesen.
Die Google suche hab ich bereits verwendet aber dort gibt es nur beispiele mit jQuary, welches ich aber nicht verwenden möchte.
ich krieg es zwar hin das eine Toolbox erzeugt wird, diese aber nicht wieder geschlossen werden kann.
Im Idealfall soll diese geschlossen werden wen ich aus der Toolbox rausklicke aber über ein Button bzw ein Link ist es auch O.K.
mein Code: http://jsfiddle.net/3yh7S/
bzw.
über .style=display:block; und .style=display:none; will ich es auch nicht machen da ich unnötige Ladezeiten vermeiden will.
vielleicht gibt es ja jemanden hier der mir helfen kann bzw. will
Danke schon mal im Voraus
Vorab ich hab bis jetzt mit Javascript nie gearbeitet es ist mein erster versuch.
Ich möchte eine Toolbox realisieren, die über ein Klick geöffnet wird. Für eine MouseOver Toolbox würde ich reines CSS verwenden da ich dieser aber über ein Click steuern möchte, bin ich auf JS angewiesen.
Die Google suche hab ich bereits verwendet aber dort gibt es nur beispiele mit jQuary, welches ich aber nicht verwenden möchte.
ich krieg es zwar hin das eine Toolbox erzeugt wird, diese aber nicht wieder geschlossen werden kann.
Im Idealfall soll diese geschlossen werden wen ich aus der Toolbox rausklicke aber über ein Button bzw ein Link ist es auch O.K.
mein Code: http://jsfiddle.net/3yh7S/
bzw.
Code:
var posx = 0,
posy = 0,
on = false,
tooltipp_box = document.createElement('div'),
tooltipp = document.createElement('div'),
tooltipp_arrow = document.createElement('div'),
close_link = document.createElement('a'),
tipptext = document.createTextNode(toolbox_on.title),
closetext = document.createTextNode("Schließen");
tooltipp_box.id = "tooltipp_box";
close_link.href = "#";
close_link.id = "toolbox_off";
close_link.title = "Schließen"
tooltipp.className = "tooltipp";
tooltipp_arrow.className = "tooltipp_arrow";
document.onmousemove = function (e) {
posx = e.pageX || event.clientX + document.body.scrollLeft;
posy = e.pageY || event.clientY + document.body.scrollTop;
};
document.getElementById('toolbox_on').onclick = function () {
if (on == false) {
tooltipp_box.style.left = posx - 30 + "px";
tooltipp_box.style.top = posy + 10 + "px";
document.body.appendChild(tooltipp_box);
tooltipp_box.appendChild(tooltipp);
tooltipp_box.appendChild(tooltipp_arrow);
tooltipp.appendChild(tipptext);
tooltipp.appendChild(close_link);
close_link.appendChild(closetext);
on = true;
}
}
document.getElementById('toolbox_off').onclick = function () {
document.body.removeChild(tooltipp_box);
on = false;
}vielleicht gibt es ja jemanden hier der mir helfen kann bzw. will
Danke schon mal im Voraus
Zuletzt bearbeitet von einem Moderator:
