jQuery rollover hover effect makes link dissapear

I modified the original code just a little and now have $('#special a').bind('mouseover', function(){
$(this).parent('div').css({position:'relative'});
var img = $(this).children('img');
$('<div />').text(' ').css({
'height': img.height(),
'width': img.width(),
'background-color': 'black',
'position': 'absolute',
'background': 'url(delete.png) center no-repeat black',
'top': 0,
'left': 0,
'opacity': 0.5
}).bind('mouseout', function(){
$(this).remove();
}).insertAfter(this);
});

With my html being:<table cellpadding="10" cellspacing="0" border="0">
<tr>
<td valign='top' style='padding: 5px; margin: 0px;'>
<div id='special' align='center'>
<a href='../../iMaGeGaLlEry/Test/47143_147210328635837_100000406113729_301983_2857122_n.jpg'>
<img border='0' src='../../thumb.img.php?album=../../iMaGeGaLlEry/Test&im=47143_147210328635837_100000406113729_301983_2857122_n.jpg' class='hover'>
</a>
</div>
</td>
<td valign='top' style='padding: 5px; margin: 0px;'>
<div id='special' align='center'>
<a href='../../iMaGeGaLlEry/Test/47377_147210731969130_100000406113729_301987_7618538_n.jpg'>
<img border='0' src='../../thumb.img.php?album=../../iMaGeGaLlEry/Test&im=47377_147210731969130_100000406113729_301987_7618538_n.jpg' class='hover'>
</a>
</div>
</td>
<td valign='top' style='padding: 5px; margin: 0px;'>
<div id='special' align='center'>
<a href='../../iMaGeGaLlEry/Test/154973_591749991437_32600476_34231000_8211372_n.jpg'>
<img border='0' src='../../thumb.img.php?album=../../iMaGeGaLlEry/Test&im=154973_591749991437_32600476_34231000_8211372_n.jpg' class='hover'>
</a>
</div>
</td>
<td valign='top' style='padding: 5px; margin: 0px;'>
<div id='special' align='center'>
<a href='../../iMaGeGaLlEry/Test/being-erica-full.jpg'>
<img border='0' src='../../thumb.img.php?album=../../iMaGeGaLlEry/Test&im=being-erica-full.jpg' class='hover'>
</a>
</div>
</td>
</tr>
</table>

Now, the rollover sort of works exactly the way I want it to (I want to show a red X over top of the main image. The image is read from the directory, modified using GD to a thumbnail size and then displayed so the sizes may vary depending on the original.

However, the link disappears and I cannot click on the link. I eventually want it so I can delete the image by clicking on it. How can I get my link back YET keep the hover image?

Also, on a side note there is about 1-2 pixels at the bottom of every image that if landed on just right creates another overlay over the first overlay giving it two overlays on one image. How would I fix that as well. Thanks.

#1: You can’t have the same ID more than once in a document. Instead, make it a class.

#2: Divs are block-level elements and are technically not allowed in anchors. Although it doesn’t matter here validation wise it could have a different outcome in different browsers. Instead, use a span or something, or at least make your anchors display as block-level elements, too.

#3: Don’t mix JS and CSS (unless you need to get or set values dynamically). Instead, apply a class (if necessary at all) to the newly appended element and style it with CSS then.

#4: Why don’t you just do it like this:

$('.special a').append('<span />');
$('.special a span').css({
width: $(this).siblings('img').width(),
height: $(this).siblings('img').height()
});

… and then:

.special a {
display: block;
position: relative;
}
.special a span {display: none;}
.special a:hover span {
display: block;
background: black url(delete.png) center no-repeat;
top: 0;
left: 0;
opacity: 0.5;
}

I tried your method, however at present time I get Error: missing } after property list
Source File: http://www.example.coom/files.php?album=Test
Line: 47, Column: 41
Source Code:
width: $(this).siblings('img').width();
I am not sure exactly where I'm missing the } ... It's currently the exact same as you posted.

Oops, I’m sorry, the semicolons are wrong there. I’ve corrected my previous post.

That's what I thought... However when I made that change it gives this error now Error: a.parentNode is null
Source File: http://www.adrenalinejunkiesinc.ca/ctrl_panel/PhotosManager/jquery-1.4.2.min.js
Line: 98
My HTML now looks like<table cellpadding="10" cellspacing="0" border="0">
<tr>
<td valign='top' style='padding: 5px; margin: 0px;'>
<div align='center'>
<span class='special'>
<a href='../../iMaGeGaLlEry/Test/47143_147210328635837_100000406113729_301983_2857122_n.jpg'>
<img border='0' src='../../thumb.img.php?album=../../iMaGeGaLlEry/Test&im=47143_147210328635837_100000406113729_301983_2857122_n.jpg' class='hover'>
</a>
</span>
</div>
</td>
<td valign='top' style='padding: 5px; margin: 0px;'>
<div align='center'>
<span class='special'>
<a href='../../iMaGeGaLlEry/Test/47377_147210731969130_100000406113729_301987_7618538_n.jpg'>
<img border='0' src='../../thumb.img.php?album=.....
and so on...

I didn’t say “Make the elements named ‘special’ a span”, they can stay a div.
But anyway, this happens when I don’t test code that I propose. :) I realize now that the “this” keyword doesn’t work since it’s not within a function. You’d have to change it to:
$('special a span').siblings… Or wrap it in an each() function.

I've reset it so the class is in the div again... no more span tags except for the appended ones. However, this still does not seem to work.

Was I suppose to add/replace what I had or completely ignore what I had before?

OK, the script should look like this:

$('.special a').append('<span />');
$('.special a span').css({
width: $('.special a span').siblings('img').width(),
height: $('.special a span').siblings('img').height()
});


the CSS like this:

.special a {
position: relative;
display: block;
}
.special a span {display: none;}
.special a:hover span {
display: block;
background: black url(delete.png) center no-repeat;
top: 0;
left: 0;
opacity: 0.5;
position: absolute;
}

and the HTML like in your first post, only that the mentioned ID attributes have to be replaced with class attributes.

Hey man...
It seems to be working correctly now (only after the page is completed loading but I can work on that part). However, it only reads the width and height from the first image. Not all of the images are the same size so I get some with the overlay not covering the whole image. (I've included and example)

http://www.adrenalinejunkiesinc.ca/ctrl_panel/PhotosManager/Example1.jpg

Ah dammit! Yeah, these are things I find out myself step by step when I’m sitting over such a task. Of course my last version wouldn’t work like that. As I mentioned earlier in this case you’ll have to use an each() loop. Try this:

$('.special a').append('<span />');
$('.special a span').each(function() {
$(this).css({
width: $(this).siblings('img').width(),
height: $(this).siblings('img').height()
});
});

That seems to have it working... just a few small bugs to work out.

#1: I stated this one earlier and I cannot see why it is doing this. When the page first loads there is a little red square that shows instead of the default red x. If I refresh the page in my browser it works as it should (with exception of #2).
http://www.adrenalinejunkiesinc.ca/ctrl_panel/PhotosManager/Example2.jpg

#2: The taller photos has their overlay over to the left. I currently have the image centered in the cell. The overlay is left justified and I cannot manage to move it over using any of my CSS tricks.
http://www.adrenalinejunkiesinc.ca/ctrl_panel/PhotosManager/Example3.jpg

For the first one it would help to see the page itself. The second one is because the anchors are set to display as block elements, and hence, they are filling the entire width of each cell. The appended span elements are positioned absolutely at the top left of the anchor while the images are centered; that’s why. You’ll have to position the spans left: 50% and margin-left by half of their width (do that with JS) to center them, too.

I have given the spans a float of 50% and given the spans a margin-left of half of the width and it positions the overlay exactly to the right of the images.
$('.special a span').each(function() {
$(this).css({
width: $(this).siblings('img').width(),
height: $(this).siblings('img').height(),
left: '50%',
'margin-left': ($(this).siblings('img').width()/2)
});
});
I'm pretty sure this is correct.

I have sent you some login information for the page.

Oh, I get it. The problem is that the images take some time to load and since they have no specific dimensions set in the HTML (or CSS) the script calculates the image dimensions before they are actually loaded, hence getting them wrong and therefore setting the span’s dimensions wrong, too. Properly calculating image dimensions has always been a problem in one or another browser, I’ve found that the safest way is to set the width and height attributes of the image elements so they have specific dimensions right from the beginning for JS to pick that up. The reason why it’s red is because the X is right in the middle and that’s what you see of the X when the container is so small.

And the margin must be negative, by the way. Sorry if I forgot to mention this.

Ha, it works. I tried making the "left" negative and everything else but never thought to make the margin negative. :\

I've also fixed the red square problem my allowing the script to resize the spans when I rollover them instead of on the page load. Th image should be there if someone is rolling over it.