У меня есть небольшой код, созданный с DOM и Javascript. Он должен создать всплывающую подсказку ниже ссылки. Он работает по назначению для одной ссылки, но теперь я понял, что мне нужно иметь несколько ссылок, поэтому я не могу использовать <a id>
как я уже использовал.
В моем коде я в настоящее время прокомментировал часть xmlhttp, но мне это нужно в будущем. Не возражайте.
Javascript:
function createTooltip(str)
{
if (str == "" || !str)
{
return;
}
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else // for IE5 and IE6
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
/*xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{*/
//document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
var tooltip = document.createElement("div");
var link = document.getElementById("tooltip");
tooltip.setAttribute('id', 'tooltip-style');
tooltip.innerHTML = "<p>piece of crap</p>";
if (str == link.rel)
{
link.parentNode.insertBefore(tooltip, link.nextSibling);
}
/*}
}
xmlhttp.open("GET", "tooltip.php?s="+str, true);
xmlhttp.send();*/
}
function removeTooltip(str)
{
var tooltip = document.getElementById("tooltip-style");
tooltip.setAttribute('id', '');
tooltip.innerHTML = "";
}
HTML:
<a href="#" rel="35" onmouseover="createTooltip(this.rel);" onmouseout="removeTooltip(this.rel);" id="tooltip">Item</a><br><br>
<a href="#" rel="25" onmouseover="createTooltip(this.rel);" onmouseout="removeTooltip(this.rel);" id="tooltip">Item</a>
Предполагается, что код создает блок div ниже ссылки, которую вы наводили, а не на каждую ссылку. Я пытался играть с getElementByClassName в течение нескольких часов, но я просто не могу заставить его работать. Также отметим, что значение <a rel>
вряд ли будет уникальным в будущем.
Спасибо за ваше время. Я ценю это.
var a = getElementsByClassName('classname');
for(var i=0; i<a.length; i++){
//each element will be a[i] do whatever with them you want
}
getElementsByClassName
(обратите внимание на множественное число).