So, I play WoW. I'm not ashamed to admit it, but I am ashamed of my guilds website. Put simply, it's an abomination. So, I knew I needed to slap a nice style on it. Unfortunately, the HTML is tables based and almost as ugly as the rendered page. While I've been able to hack my way around most of the site, the small "New Post" "No New Post" "Hot Topic" gifs have proved a sticking point.

The site in question is here. My work so far is here.

The HTML structure in question is

    <tr>
    <td class="row1" width="20" valign="middle" align="center">
        <img alt="No new posts" src="http://i76.servimg.com/u/f76/12/06/98/65/folder15.jpg" title="No new posts"/>
    </td>

As you can see, in my current style, I've been using the :before and :after to replace other buttons around the site, but they only worked because they had an <a> tag around them, so I could hide the image and display the text :after the <a>. These non linked images, however, have no such unique wrapper and all I can use is the <img> tag itself.

Is it possible to replace these images with CSS, or do I have to resort to a userscript? I had a go at one here, but it isn't working and I can't find a reason. I suck with javascript, and besides, I'd rather keep it all wrapped up in a nice style.

2 answers

3
points

Your JavaScript is pretty close and I'd say this is like the only way to do it. Here is the revised JS, with mostly just a few syntax corrections:

$(document).ready(function(){
    $('img[alt="No new posts"]').after('<span class="nonew">None</span>');
});

If you are wanting to hide the image, then you'll need to do the following:

$(document).ready(function(){
    $('img[alt="No new posts"]').hide().after('<span class="nonew">None</span>');
});
Answered over 7 years ago by Darryl Hein
danwellman 5600
1
point

If you just want to hide the image you could set its SRC to a non-existent image and it would then display the ALT text because it couldn't find the image (although this could generate 404's on the server and have the server admins fretting!)

Maybe something like:

$(function() {
  $("img[alt='No new posts']").attr("src", "anonexistentimge.gif")
})

Would help?

Answered over 7 years ago by danwellman