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 (http://fredfred.net/skriker/index.php/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. :o :p :D

[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. :D
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? :confused: 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. :p

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? :o

[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. :confused:

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 (http://www.javascript-coder.com/window-popup/javascript-window-open.phtml) 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. :o )

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" class="gallery_image" />
<img src="image2.jpg" class="gallery_image" />
<img src="image3.jpg" class="gallery_image" />
<img src="image4.jpg" class="gallery_image" />
…
</gallery>

Hopefully that will work. :)

[davecuse]

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


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

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