Bullet Images not showing

**Abbster22** · 08-17-2009, 01:19 AM

1) Script Title: Bullet Image Link script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...bulletlink.htm

3) Describe problem:

I tried using the code from the URL in the actual website that I'm making and in a separate file with no other script. It seems to work in the separate file, but when I take it and apply it to the website, it doesn't work. I think it may have to do with how my background and everything else is set up, which is shown below in the code. I'm wondering not only how to get the images to show, but to also make the background automatically resize according to the users' screen resolution. Thank you very much.

Code:

<script type="text/javascript">
/***********************************************
* Bullet Link script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Define your bullet image(s) via arbitrary variables, where bulletimg=["imagepath", imagewidth, offsetxfromroot, offsetyfromroot]
var bulletimg1=["images/arrow1.gif", 60, 2, 0]
var bulletimg2=["images/arrow2.gif", 65, 4, 0]
var bulletimg3=["images/arrow3.gif", 60, 2, 0]
var bulletimg4=["images/arrow4.gif", 60, 4, 0]
var bulletimg5=["images/arrow5.gif", 60, 2, 0]

////Stop editting here/////////////////////
var classnameRE=/(^|\s+)ddbullet($|\s+)/i //regular expression to screen for classname within element

function caloffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function displaybullet(linkobj){
var reltovar=window[linkobj.getAttribute("rel")]
bulletobj.setAttribute("src", reltovar[0])
bulletobj.style.left=caloffset(linkobj, "left")-reltovar[1]-reltovar[2]+"px"
bulletobj.style.top=caloffset(linkobj, "top")-reltovar[3]+"px"
bulletobj.style.visibility="visible"
}

function modifylinks(){
bulletobj=document.createElement("img")
bulletobj.setAttribute("id", "bulletimage")
bulletobj.className="bulletimagestyle"
document.body.appendChild(bulletobj)
for (i=0; i<document.links.length; i++){
if (typeof document.links[i].className=="string" && document.links[i].className.search(classnameRE)!=-1){
document.links[i].onmouseover=function(){displaybullet(this)}
document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"}
}
}
}

if (window.addEventListener)
window.addEventListener("load", modifylinks, false)
else if (window.attachEvent)
window.attachEvent("onload", modifylinks)
else if (document.getElementById || document.all)
window.onload=modifylinks
</script>
<style>
#container {
			 height: 487px;
			 width: 650px;
			 padding: 0px;
			 margin-top: -55px;
			 background: none;
			 overflow: visible;
			 z-index: 10;
			}
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript">
</script>
</head>

<body>
<img id="background" src="images/flowerbackground5.jpg" />
<div id="navcontainer">
<div id="link1"><a href="#" id="current" class="ddbullet" rel="bulletimg1">About Me</a>
</div>
<div id="link2"><a href="#" class="ddbullet" rel="bulletimg2">Awards</a>
</div>
<div id="link3"><a href="#" class="ddbullet" rel="bulletimg3">Artwork For Sale</a>
</div>
<div id="link4"><a href="#" class="ddbullet" rel="bulletimg4">What's Next?</a>
</div>
<div id="link5"><a href="#" class="ddbullet" rel="bulletimg5">Contact Me</a>
</div>
</div>
</body>

CSS:
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#background {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
             }

#navcontainer {
	width: 960px;
		height: 40px;
		margin-top: 10px;
		margin-right: auto;
	margin-left: auto;
	position: relative;
	border: #000 solid 1px;
	z-index: 14;
}

#link1, #link2, #link3, #link4, #link5 {
			height: 40px;
			width: 165px;
			float: left;
}

#link1 { padding-left: 5px; }

#link2 { padding-left: 15px; }

#link3 { padding-left: 35px; }

#link4 { padding-left: 50px; }

#link5 { padding-left: 30px; }

#link1 a, #link2 a, #link3 a, #link4 a, #link5 a
{
padding-bottom: 14px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}

#link1 a:link, #link1 a:visited, #link2 a:link, #link2 a:visited,
#link3 a:link, #link3 a:visited,
#link4 a:link, #link4 a:visited,
#link5 a:link, #link5 a:visited
{
color: red;
}

#link1 a:hover, #link2 a:hover, #link3 a:hover, #link4 a:hover, #link5 a:hover
{
color: black;
}

.bulletimagestyle {
	/*Absolute position bullet image. No need to modify*/
position: absolute;
left: -200px;
}