Member Avatar for alphabetical

I am using the below pre-built script for my mouseover images:

<script src="js/chrisdomroll.js">
/****************************************************
* DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
****************************************************/
</script>

And it works on the page simply by adding the following attribute to the image tag, with the behind being the mouseover image's url. Yes, it works.

class="domroll button/l1b.png"

But i have an external JS file that writes functions to the page, attached to the page.

There are some switch cases (i can post them in their entirety if you want), but the main purpose is that it changes the html of the DIV with the ID "home".

document.getElementById("home").innerHTML='';
var home='<a href="#" onClick="afis(1);"><img src="button/l5b.jpg" border="0" class="domroll button/l5.jpg"/></a>';

Note that the image "button/l5b.jpg" shows. But the mouseover effect done with "class=domroll button/l5.jpg" does not.

At first i guessed it could be a file path problem with the image, but later i realise i don't even see the red X that indicates a broken image. So i am guessing that this JS file cannot read another JS file?

The hierarchy of the file is like this:

- index.html
- js/chrisdomroll.js (the mouseover class)
- js/writefunctions.js (the class i used to write my own functions)

It does not seem to work either when i pasted the whole chunk of javascript from writefunctions.js into index itself.

Also, while the div shows properly in other browsers, it does not show up at all in Safari.

Whats wrong? Thanks for reading and your advice in advance.

Let me know if you need to see the files to figure the mistakes.

Cheers.

  • 2 Contributors
  • 2 Replies
  • 144 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by alphabetical
Member Avatar for essential

Try the following loading sequence of the script (via src) provided inside this document, and i've also include a simple script that you can apply with your page when injecting dynamic elements.

Here's the code:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ Template Ready */

div { padding : 1em; margin-top : 1em; border : 1px solid #ccc; }

/* ]]> */
</style>
<!-- LOADING ORDER -->
<!--01-->
<script type="text/javascript" src="js/writefunctions.js"></script>
<!--02-->
<script type="text/javascript" src="js/chrisdomroll.js"></script>

<script type="text/javascript">
// <![CDATA[
var modern = Boolean( document.getElementById );
var explorer = Boolean( document.all && !modern );

var afis = function( m ) { // Simulated function, and must be remove on actual run

alert( m );
};

var testFunc = function( ids ) {  /* Just a test function that you may apply in your writefunction.js

A cross-browser script sample that easily inject elements inside your page without hustle.
 */

var img;
var home;  

var div = (( modern ) ? document.getElementById( ids ) : (( explorer ) ? document.all[ ids ] : undefined ));
   if ( div ) { div.innerHTML = "";
      if ( document.createElement ) {
      img = new Image();
      img.src = "button/l5.jpg"; 
// Please verify if the image path is correct.
      img.alt = "button/l5.jpg";
      img.className = "domroll button/l5.jpg"; 
// Please check if i've provided the correct class value.
      home = document.createElement("a");
      home.href = "javascript:void(0)";
      home.onclick = function() { afis( 0 ) };
         
         if ( explorer ) {
         home.insertAdjacentElement("beforeEND", img );   
         div.insertAdjacentElement("beforeEND", home );
         } else {
         var container = (( document.createDocumentFragment ) ? document.createDocumentFragment() : null );
         home.appendChild( img );
         var insert = (( container ) ? container.appendChild( home ) : home );
         div.appendChild( insert );
         } return;
      } 
   home = ( '<a href="javascript:void(0)" onclick="afis(0)">' +
   '<img src="button/l5.jpg" style="border : none;" class="domroll button/l5.jpg" />' +
   '</a>' );
   div.innerHTML = home;
   return;
   } alert( "Your browser is too old to handle this function, please update it with the latest patch", "Outdated Browser" );
};

window.onload = function() {
   testFunc( "home" );
};
// ]]>
</script>
</head>
<body>
<div id="home">Test div#1</div>
<div id="div">Test div#2</div>
</body>
</html>

hope it helps...

Member Avatar for alphabetical

Thanks!

I will try your script and see if it works. (:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.