nicht angemeldet
Hallo,
ich hoffe jemand kann mir weiterhelfen:
Ich entwickle gerade Markenverzeichnis, bei dem jeder Eintrag anklickbar (Custom Checkbox) sein soll und dazu noch einen Tooltip enthält.
Soweit bin ich schon:
http://www.franckreich.de/wip/brandbar.html
<body>
<!-- brand container -->
<div id="brandBar">
<form method="post" action="">
<div class="brands">
<table class="brandTable">
<tr>
<td class="logoCarrier_checked" id="marke9900000000073_Troyan">
<input type="checkbox" name="0" checked="checked" class="styled" />
<div class="tooltip" id="0">
<p>bl2bl2</p>
</div>
</td>
</tr>
<tr>
<td>
<span class=brandName">name</span>
</td>
</tr>
</table>
</div>
<div class="brands">
<table class="brandTable">
<tr>
<td class="logoCarrier_checked" id="marke9900000000097_bleed">
<input type="checkbox" name="1" class="styled" />
<div class="tooltip" id="1">
<p>bl3bl3</p>
</div>
</td>
</tr>
<tr>
<td>
<span class=brandName">name</span>
</td>
</tr>
</table>
</div>
<div class="brands">
<table class="brandTable">
<tr>
<td class="logoCarrier">
<img class="shrunkLogo" src="members/logos/marke9900000000097_bleed.jpg" rel="bleed"/>
<!-- tooltip-->
<div class="tooltip" id="bleed">
<p>bl1bl1</p>
</div>
<!-- end tooltip -->
</td>
</tr>
<tr>
<td>
<span class=brandName">name</span>
</td>
</tr>
</table>
</div>
</form>
</div>
</body>
1. Eintrag = Checkbox, anklickbar
2. Eintrag = Checkbox, anklickbar
3. Eintrag = reguläres IMG mit Tooltip
Beim Laden der Datei werden die Checkboxen ausgeblendet und stattdessen Images erzeugt. Beim Anklicken wechselt der Status von Checked/Unchecked und entsprechend das Hintergrundbild.
// -------------------------- Tooltip Functions -------------------------------------------
$(function()
{
$('.logocarrier img[rel], .logoCarrier_checked img[rel]').tooltip(
{
offset: [0, 0],
effect: 'slide'
});
})
// -------------------------- Replace Checkbox Buttons -------------------------------------
window.onload = init;
var d=document;
function init() {
so_createCustomCheckBoxes();
}
function so_createCustomCheckBoxes()
{
events = new Array("onfocus", "onblur", "onselect", "onchange", "onclick", "ondblclick", "onmousedown", "onmouseup", "onmouseover", "onmousemove", "onmouseout", "onkeypress", "onkeydown", "onkeyup");
var i=0;
instance = d.getElementById("brandBar").getElementsByTagName ("table");
for(a=0;a<instance.length;a++)
{
kopf = instance[a].getElementsByTagName("td");
for (w=0;w<kopf.length;w++)
{
v = kopf[w].id
if (v != "")
{
formField = kopf[w].childNodes.item(1).getAttribute("type");
if (formField == "checkbox")
{
cover = kopf[w].childNodes.item(1);
cover.style.display = "none";
n = d.createElement("img");
n.setAttribute("class","styled");
n.setAttribute("src","members/logos/"+v+".jpg");
n.setAttribute("width","58px");
n.setAttribute("style","cursor:pointer;");
n.setAttribute("rel",i);
cover.parentNode.insertBefore(n,cover.nextSibling);
if(cover.checked == false)
{
n.previousSibling.parentNode.setAttribute("class","logoCarrier");
}
else
{
n.previousSibling.parentNode.setAttribute("class","logoCarrier_checked");
}
n.xid = cover.getAttribute("name");
n.onclick = function()
{
so_toggleCheckBox(this,0);
return false;
}
n.frmIndex = i;
cover.objRef = n;
}
i = i+1;
}
}
}
};
function so_toggleCheckBox(imgObj,caller)
{
formObj = d.forms[imgObj.frmIndex];
objName = imgObj.xid;
status = d.getElementsByName(objName)[0].checked
if (status == true)
{
d.getElementsByName(objName)[0].checked = false;
d.getElementsByName(objName)[0].parentNode.setAttribute("class","logoCarrier");
}
else
{
d.getElementsByName(objName)[0].checked = true;
d.getElementsByName(objName)[0].parentNode.setAttribute("class","logoCarrier_checked");
}
}
Beim Erzeugen der Images werden alle IMG durchlaufen. Der Zähler i läuft mit (0,1,2). Wenn ich mit n.setAttribute ("rel",i) definiere sollte doch jedem erzeugten Bild das Attribut "rel" mit dem Wert i (0,1,2) zugeordnet werden?
Der Tooltip hat als ID die entsprechenden Nummern (0,1,2) und müsste eigentlich aufgerufen werden.
Frage: WARUM FUNKTIONIERT ES NICHT?
Schon mal vielen Dank für Input.
Gruss
Frequent