Forum Moderators: not2easy
I am trying to use XHTML and CSS.
Thanks
Ken
Here is my current css and sample html.
<removed>
I have validated the XHTML and CSS. The problem is a gap between the rows in the tables in FF. IE displays it as I would hope. It is a "gap" on the bottom of each row only, well so Firebug appears to show me.
Ken
[edited by: encyclo at 12:55 am (utc) on May 1, 2007]
[edit reason] See Guide to Posting Code [webmasterworld.com] [/edit]
(You have, by the way, overlapping styles.)
I wrote a mouseover/out/click pre-caching image swapper, that's autonomous, only 1 line in your HTML and that's just to call the script in.
Dabrowski - thanks for the feedback. Any chance you can supply a link to your suggested JS or a document discussing what you did?
Thanks again to both of you.
Ken
But here's my init function, and the mechanism to automate it. Should be a step in the right direction so you can build your own code from it. I welcome further questions if you have any.
Basically stick this code in an external js file, for example rollover.js as I call it. In your HTML's <head> add this line:
<script type='text/javascript' src='rollover.js'></script>
That's all the code you need in your HTML. The browser will load the script, which uses the addEvent function to make itself run when the page has loaded, like <body onload=''>.
The page loads and the rolloverInit function is called, which searches for all <img> tags, checks whether to apply the rollover by looking at the name='' property. If needed, the addCache function will pre-load the image, and the addEvent function goes into overdrive here by adding all 4 events to each image.
function rolloverInit() {
var imgs = document.getElementsByTagName( "IMG");
var i;for( i = 0; i < imgs.length; i++)
if( imgs[ i].name && imgs[ i].name.indexOf( "rollover")!= -1) {
addCache( imgs[ i].src);addEvent( imgs[ i], "mouseover", mouseHover);
addEvent( imgs[ i], "mousedown", mouseDown);
addEvent( imgs[ i], "mouseup", mouseHover);
addEvent( imgs[ i], "mouseout", mouseUnHover);
}
}function addEvent(elm, evType, fn, useCapture)
{
//Credit: Function written by Scott Andrews
//(slightly modified)var ret = 0;
if (elm.addEventListener)
ret = elm.addEventListener(evType, fn, useCapture);
else if (elm.attachEvent)
ret = elm.attachEvent('on' + evType, fn);
else elm['on' + evType] = fn;return ret;
}function mouseHover( evt) {
var e = evt ¦¦ event;
var obj = e.target ¦¦ e.srcElement;obj.src = ............
}addEvent( window, "load", rolloverInit);
Have fun filling in the blanks! You can probably get some by looking at the existing MM_SwapIng functions.
I was actually asking for a discussion doc/info rather than code as I agree that you do learn more doing it yourself.
What you have provided is more than enough, thanks again.
Ken
It's basically keeying your JS completely separate from your HTML, as you would with the CSS. The addEvent function then becomes the starting point of any script.
Good luck!
