Hi bhFranka!

Check out this raid progression script... it only uses images so it can be adapted for any game.

I am having one little issue. When you click on a boss icon, the image that pops up is displayed 2 times stacked on one another. How would I go about fixing this?

My site: http://www.guildportal.com/Guild.aspx?GuildID=329857

Mottie, I was wandering if I could get a second opinion of the three color schemes I have done up. I have yet to launch my guild, so I can not really ask for their opinions.

If you could tell me what you think, it would be appreciated.



You would not believe how hard it is to find screenshots of things for WAR, so all of these were taken by me yesterday.

Would it help if the icons for the creatures lit up upon hover? I think I know how to pull that off.

I was able to get them to light up by making a second image of each with them lit.

Changing this:

        <a href="http://i261.photobucket.com/albums/ii69/FallenWolve333/hahaha-wut.jpg" rel="facebox">
        <img alt="" src="http://i261.photobucket.com/albums/ii69/FallenWolve333/VermerFangchitter1.jpg" />

To this:

        <a href="http://i261.photobucket.com/albums/ii69/FallenWolve333/hahaha-wut.jpg" rel="facebox" ="document.images['s1a'].src='http://i261.photobucket.com/albums/ii69/FallenWolve333/KokritMan-Eater2hovered.jpg';" ="document.images['s1a'].src='http://i261.photobucket.com/albums/ii69/FallenWolve333/KokritMan-Eater2.jpg';"><img alt="" width="200" height="50" style="border-style: solid; border-width: 0px;" src="http://i261.photobucket.com/albums/ii69/FallenWolve333/KokritMan-Eater2.jpg" name="s1a" />

I don't really know much about using html but I played with it for a good while and it works. The one part that took some time was figuring out where the "s1a" is, I had to label each different image with a different letter, ala "s1b". I don't know  if that is the best way to do this but it is working...

You can see an example on my home page. As of right now, only the bottom one lights up. I am debating between keeping the natural color or the fully colored one. I don't care much for the middle one at all.

Ok here ya go, a script to add a hover image...

Replace your script with this (the second paragraph is all new, but copy the whole thing or you'll get an error):

<script type="text/javascript">
$(document).ready(function(){
 $('#instances h3').click(function(){
     var active = $(this).html();
  $(this).toggleClass('selected').next().toggle(300);
  $('#instances h3').each(function(){
   if ($(this).html()!=active) {
    $(this).removeClass('selected').next().hide(300);
   }
  })
 }).next().hide();

/* Add a hover image */
 $('#instances').find('a').hover(function(){
  var img = $(this).find('img');
  var url = img.attr('src');
  var typ = url.substring( url.length-4, url.length);
  img.attr('src', img.attr('src').replace(typ, img.attr('rel') + typ))
 }, function(){
  var img = $(this).find('img');
  var url = img.attr('src');
  var typ = url.substring( url.length-4, url.length);
  img.attr('src', img.attr('src').replace(img.attr('rel') + typ, typ))
 })
});
</script>

Then for each image that has a hover image, replace it something like this:

<li>
 <a rel="facebox" href="http://i261.photobucket.com/albums/ii69/FallenWolve333/hahaha-wut.jpg">
 <img alt="" rel="hovered" width="200" height="50" src="http://i261.photobucket.com/albums/ii69/FallenWolve333/KokritMan-Eater2.jpg" />
 </a>
</li>

What the rel="hovered" tells the script is the ending to add to the file name... so the main image is:

http://i261.photobucket.com/albums/ii69/FallenWolve333/KokritMan-Eater2.jpg

and the hovered image will be

http://i261.photobucket.com/albums/ii69/FallenWolve333/KokritMan-Eater2hovered.jpg

I had to do it that way because your last image ends with "hovered-1". If you don't have a hovered image, leave the rel attribute empty ( rel="" )

Oh and I removed all the styles from the images and moved it into the CSS:

#instances img { border: 0; }

So hopefully, this will make your life easier