Need Some CSS Help

[Moogie]

Greetings,

I\'m in need of some help setting up my art gallery over at http://www.albinomoogie.net and was wondering if there were any web-gurus around willing to lend a helping hand.

In the Gallery page, my aim is to have rows of thumbnail images shrouded with a \'mist\' (just a cover image that hides the real thumbnail). When you mouseover each window, the mist clears and you can see the thumbnail. However, there\'s two problems:

Firstly, the image crossfades perfectly, but does not fade back to \'mist\' when your mouse leaves the area.

And also, the hyperlink of the image seems to be such a small area of the thumbnail that you can\'t easily click it.

I can\'t figure out how to fix these... not that I would know how. I just grabbed these scripts from http://www.brothercake.com/site/resources/scripts/transitions and was helped by josePhoenix in setting them up correctly. Unfortunately, he doesn\'t know why they\'re not working right either.

I\'m using \'crossfade\', I have the transitions.css in the main site dir, I have crossfade.js in there too, and the code I\'ve used can be viewed from the source of the gallery page.

If anyone could help, you\'d be a lifesaver, and I\'d really appreciate it. But... if you do help, bare in mind that I actually know zero about javascript and css and webdesign in general. No jargon please!

[Tharizdun]

Run them through the W3C html and css validator as a first step I\'d say, clean up the obvious glitches and errors until they report a clean bill of health, then if things are still not entirely right read up on the notes of the scripts you have used. At the moment there are issues with both CSS and HTML.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.albinomoogie.net%2F

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.albinomoogie.net%2F&usermedium=all

[Moogie]

Thanks for the links Tharizdun, I fixed what I could, but I dunno about the rest. None of it seems related to the image fading code either.

Hrmm... stuck stuck stuck. I can\'t put up my gallery untill these thumbnails decide to work. :/


Update: Download these two files and view art2.html locally,

http://www.albinomoogie.net/art2.html
http://www.albinomoogie.net/crossfade.js

The odd thing about this is, this works when you\'ve got them stored locally. But put them up on the net and they no longer work!

[Entamis]

EDIT: It works for me, both online and locally. Maybe it\'s your browser\'s cache.

[Moogie]

Woo, yes, got it working. Now to figure out how to make it accept \"target=_blank\", which it currently accepts just as much as it would an alien Chestburster, and I\'ll soon have my art gallery up again!

Thanks to all who helped... jose, Kosh, Golmir, Girtek, Nilaya, Tharizdun... who did I miss? So many people got stumped by this thing!

[Hadfael]

Code: [Select]


function clickIt(what)
{
   //searches the pic in the ones stored
   for (i=0;i<=nbPics;i++)
   {
      if (elements[i]===what || altElements[i]===what)
      {
//to open in the current window uncomment this line
//         document.location=linkUri[i];
//to open in a new window uncommment until [endPopup]
         paramsPopup=\'\';
         window.open(linkUri[i],\"_blank\",paramsPopup);
//[endPopup]
// valid parameters for the new window:
//   toolbar = yes | no  add/remove browsers toolbar
//   location = yes | no  add/remove browsers location field
//   directories = yes | no  add/remove browsers directories field
//   status = yes | no  add/remove browsers status field
//   menubar = yes | no  add/remove browsers menubar
//   scrollbars = yes | no  add/remove browsers scrollbars
//   resizeable = yes | no  allow new window to be resizable
//   width = value  window width in pixels
//   height = value  window height in pixels
//a sample use would be parapsPopup=\'status=no,width=320,height=200\';
      };
   };
};

just replace the whole clickIt function and here you are