onMouseOver-div strul

stephanMedlem sedan feb. 2006117 inlägg
7 mars 2008 15:57#1
Försöker göra en enkel onMouseOver-grej där det ska dyka upp en knap över divven som man ska kunna klicka på, men jag får det inte riktigt att funka som jag vill.
Se: http://www.terning.net/onmouse.html
Några förslag på hur jag ska gå tillväga?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title></title>
<style type="text/css">
<!--
#content > div	{ position: relative; }
-->
</style>
<script type="text/javascript">
<![CDATA[
document.getElementsByClassName = function(clsName){
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for(var i = 0;i < elements.length;i++){
        if(elements[i].className.indexOf(" ") >= 0){
            var classes = elements[i].className.split(" ");
            for(var j = 0;j < classes.length;j++){
                if(classes[j] == clsName)
                    retVal.push(elements[i]);
            }
        }
        else if(elements[i].className == clsName)
            retVal.push(elements[i]);
    }
    return retVal;
}

function removeContentElement(id) {
  if(confirm("Är du säker att du vill ta bort texten?\n\nOperationen går inte att ångra.")) {
	  var d = document.getElementById('content');
	  var toBeRemoved = document.getElementById(id);
	  d.removeChild(toBeRemoved);
  }
}

function showRemovalLink(objectToRemove) {
	var oRemovalLink=document.createElement('div');
	oRemovalLink.setAttribute("id",objectToRemove.id + "_removalLink");
	oRemovalLink.setAttribute("style","position:absolute; top:5px; left:5px;");
	if (objectToRemove.firstChild.id != objectToRemove.id + "_removalLink") {
		objectToRemove.insertBefore(oRemovalLink,objectToRemove.firstChild);
		oRemovalLink.innerHTML = "<a href=\"javascript:;\" onMouseOver=\"document.getElementById('" + objectToRemove.id + "').setAttribute('style','border:#ff0000 solid 1px;');\" onMouseOut=\"document.getElementById('" + objectToRemove.id + "').setAttribute('style','border:0px;');\" onClick=\"removeContentElement('"+ objectToRemove.id +"')\">Delete</a>";
	}
}

function hideRemovalLink(objectToRemove) {
	var oRemovalLink = document.getElementById(objectToRemove.id + "_removalLink");
	objectToRemove.removeChild(oRemovalLink);
}

function prepareSections() {
	var sections = document.getElementsByClassName("section");
	for (var i = 0; i < sections.length; i++) {
		sections[i].setAttribute("onMouseOver","showRemovalLink(this)");
		sections[i].setAttribute("onMouseOut","hideRemovalLink(this)");
	}
}
]]>
</script>

</head>
<body onload="prepareSections()">
      <div id="content">
       <div id="section1" class="section">
        <p>Lorem ipsum dolor sit amet, <b>consectetuer</b> adipiscing <i>elit sed metus</i> nibh se mese me 23e&nbsp;Oktober&nbsp;2008. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa.</p>
        <ol>
          <li>consectetuer adipiscing elit</li>
          <li>metus nibh</li>
          <li>sodales a</li>
          <li>adipiscing</li>
          <li>vulputate eget, dui</li>
        </ol>
	   </div>
       <div id="section2" class="section">
        <p>Lorem ipsum dolor sit amet, <b>consectetuer</b> adipiscing <i>elit sed metus</i> nibh se mese me 23e&nbsp;Oktober&nbsp;2008. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa.</p>
        <ol>
          <li>consectetuer adipiscing elit</li>
          <li>metus nibh</li>
          <li>sodales a</li>
          <li>adipiscing</li>
          <li>vulputate eget, dui</li>
        </ol>
	   </div>
	  </div>
</body>
</html>