need a bit of help with CSS highlighting

cb911

macrumors 601
Original poster
Mar 12, 2002
4,119
3
BrisVegas, Australia
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:
Code:
.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. :eek: :p :D
 

MontyZ

macrumors 6502a
Jan 7, 2005
887
0
Try this...

Code:
.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

macrumors 601
Original poster
Mar 12, 2002
4,119
3
BrisVegas, Australia
excellent - thanks for your help. :D
i'm all for faster reacting rollovers.

well, i tried what you mentioned:
Code:
.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:
Code:
.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? :eek:
 

MontyZ

macrumors 6502a
Jan 7, 2005
887
0
Hmm, okay, I didn't test that code before, but, try this and see if it works:

Code:
gallery_item img a:hover {
        border: 1px solid #0000FF;
    }
Again, I didn't test the above, but, hopefully this will work.
 

cb911

macrumors 601
Original poster
Mar 12, 2002
4,119
3
BrisVegas, Australia
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

macrumors 601
Original poster
Mar 12, 2002
4,119
3
BrisVegas, Australia
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

macrumors 6502a
Jan 7, 2005
887
0
Okay, I had a chance to play around with this, and here's what works:

Code:
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

macrumors 6502a
Jan 7, 2005
887
0
cb911 said:
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

macrumors 601
Original poster
Mar 12, 2002
4,119
3
BrisVegas, Australia
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

macrumors 6502a
Jan 7, 2005
887
0
cb911 said:
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

macrumors 601
Original poster
Mar 12, 2002
4,119
3
BrisVegas, Australia
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:
Code:
<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:
PHP:
$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. :eek: )

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

macrumors 6502a
Jan 7, 2005
887
0
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)...

Code:
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...

Code:
<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

macrumors 6502
Feb 20, 2004
419
0
NYC
Monty, just one change to your code should take care of this

Code:
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;
     }