need a bit of help with CSS highlighting

[cb911]

i've been trying to get this page working on my site... it's just a basic gallery page.

i'm running WordPress and i'm using the iimage-gallery plug-in.

the plugin works great - it automatically creates thumbnails - and now i've just added borders between each thumbnail by adding this to the .css file:

.gallery_item img{
	display: inline;
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 6px;
    }

now all i'm trying to do is have a border come up around the thumbnail on mouseover. is that possible? i've been searching W3Schools with no answers so far.

also would it be possible to have a border around the entire group of thumbnails?

thanks for any help... i'm a CSS virgin, so please be gentle. 😱 😛 😀

 

[MontyZ]

Try this...

.gallery_item img{
        display: inline;
        margin-left: 3px;
        margin-right: 3px;
        margin-top: 6px;
        border: 1px solid #FFF;  /* make this same as page background color */
    }

img.gallery_item a:hover {
        border: 1px solid #C00;
    }

I add the border to both styles because I find the hover (rollover) reacts a lot faster if there is already a border defined in the original style.

 

[cb911]

excellent - thanks for your help. 😀
i'm all for faster reacting rollovers.

well, i tried what you mentioned:

.gallery_item img{
        display: inline;
        margin-left: 3px;
        margin-right: 3px;
        margin-top: 6px;
        border: 1px solid #FFFFFF;  /* make this same as page background color */
    }

img.gallery_item a:hover {
        border: 1px solid #0000FF;
    }

but that didn't seem to do anything at all? 😕 i mean nothing.

then i tried a few things - the best result i got using this:

.gallery_item img{
        display: inline;
        margin-left: 3px;
        margin-right: 3px;
        margin-top: 6px;
        border: 1px solid #FFFFFF;  /* make this same as page background color */
     }   

.gallery_item img{
		a:hover;
        border: 1px dashed #0000FF;
    }

using that it did show the border around the thumbnails... except it showed them without the mouseover, just all the time. a step in the right direction - i got the border to show, but just no extra effect on mouseover.

you'll notice i changed the last part there to .gallery_item img and also moved a:hover inside those brackets... of course i really have no idea what i was doing - but it seemed in keeping with the rest of the code. 😛

so can anyone help with getting this working...? and much thanks in advance for any help, and thanks again to MontyZ for your efforts - maybe i just did something really stupid to bodge it up? 😱

 

[MontyZ]

Hmm, okay, I didn't test that code before, but, try this and see if it works:

gallery_item img a:hover {
        border: 1px solid #0000FF;
    }

Again, I didn't test the above, but, hopefully this will work.

 

[cb911]

hhmmm... i just tried that and it didn't work either. 😕

i've been doing a bit of reading and came accross this:

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

could that have something to do with it?

 

[cb911]

also i'm trying to get those pictures from iimage-gallery to open in a new window of the size of the image, with all the images opening in that same window.

to get the images opening in the same new window i used ext_link_window and this seems to work when i tested it in Firefox... but it doesn't in Safari? is there a known issue with this?

and how would i get the new window to open at the exact size of the images? can this be done with HTML or do i need some JavaScript?

 

[MontyZ]

Okay, I had a chance to play around with this, and here's what works:

a .gallery_item {
     display: inline;
     margin-left: 3px;
     margin-right: 3px;
     margin-top: 6px;
     border: 1px solid #FFF;
     }

a:hover .gallery_item {
     border: 1px solid #000;
     }

Apply this way in HTML...

<a href="#"><img src="image.gif" border="0"  class="gallery_item" /></a>

 

[MontyZ]

also i'm trying to get those pictures from iimage-gallery to open in a new window of the size of the image, with all the images opening in that same window. and how would i get the new window to open at the exact size of the images? can this be done with HTML or do i need some JavaScript?

This is pretty easy with Javascript. Check out this page for some simple instructions.

 

[cb911]

okay, i tried your latest code for the 'hover border' - i copy & pasted exactly as you wrote... but all it did was remove the margins between the images?

BTW - this may be a bit different to normal since i'm using WordPress... so i'm making these changes to the style.css file. i'm not quite sure what you mean "Apply this way in HTML..."? i should only have to change the .css file, right?

thanks for your patience and help with this. 🙂

i'll check out that JS link as well.

 

[MontyZ]

okay, i tried your latest code for the 'hover border' - i copy & pasted exactly as you wrote... but all it did was remove the margins between the images?

BTW - this may be a bit different to normal since i'm using WordPress... so i'm making these changes to the style.css file. i'm not quite sure what you mean "Apply this way in HTML..."? i should only have to change the .css file, right?

Can you post the HTML that the "gallery_item" class is applied to? I forgot you're modifying a blog stylesheet. If the style is applied to the <img src> tag as in the above example, then this should work. But if the style is applied to the <a href> tag instead, then it will need to be modified.

Also, did you hold down the SHIFT key while clicking on the Refresh button in your browser to force a full refresh of the entire page? Sometimes external CSS files get cached in memory and don't take effect until a SHIFT-Refresh is done.

 

[cb911]

here's the iimage-gallery.php plug-in that i'm using, so you can download it have a look if you want:
http://mugget.com/wp-content/plugins/iimage-gallery.php

here's the homepage for the plug-in as well:
http://fredfred.net/skriker/index.php/iimage-gallery

basically all you do is go to write a blog post (or page) as you usually would... but then you use something like this to create the gallery:

<gallery crop="true" crop_center="true" max_side="100" quality="95">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
…
</gallery>

also this is from the iimage-gallery.php file:

$ig_before_each = '<a href="%s" class="gallery_item" rel="external">';//will be placed before each image

so i suppose this is really applying to the HTML? although i'm not sure about that. (also - i tired to use rel="external" instead of target="_blank" - but that's not working either. 😱 )

here's a test gallery i just made to try things out in:
http://www.mugget.com/?page_id=10

hope i've given you enough info. just ask if i haven't, or if something needs clarification. 🙂

 

[MontyZ]

Okay, you'll need to set up another style to make this work. So, add this to your .css stylesheet (it's the same as above, just renamed)...

a .gallery_image {
     display: inline;
     margin-left: 3px;
     margin-right: 3px;
     margin-top: 6px;
     border: 1px solid #FFF;
     }

a:hover .gallery_image {
     border: 1px solid #000;
     }

Then, modify your blog gallery code this way...

<gallery crop="true" crop_center="true" max_side="100" quality="95">
<img src="image1.jpg" [b]class="gallery_image"[/b] />
<img src="image2.jpg" [b]class="gallery_image"[/b] />
<img src="image3.jpg" [b]class="gallery_image"[/b] />
<img src="image4.jpg" [b]class="gallery_image"[/b] />
…
</gallery>

Hopefully that will work. 🙂

 

[davecuse]

Monty, just one change to your code should take care of this

a .gallery_image {
     display: [B]block[/B];
     margin-left: 3px;
     margin-right: 3px;
     margin-top: 6px;
     border: 1px solid #FFF;
     }

a:hover .gallery_image {
     border: 1px solid #000;
     }