Forum Moderators: not2easy
I am a relative newcomer to CSS & have a site which has a very simple thumbnail photo gallery. The styles for the thumbnail images are as follows (‘thumbs’ is the container for the thumbnail images):
.thumbs li {
list-style-type: none;
margin-bottom: .5em;
}
.thumbs img {
vertical-align: middle;
}
.thumbs {
width: 80%;
margin: 2px 2px;
padding: 0.5em 0.5em;
background-color: #333333;
overflow: hidden;
}
.thumbs img {
height: 5.5em;
margin: 0 auto 0.3em;
padding: 2 2;
border: thin #E6E6E6 solid
}
Each thumbnail has a thin grey border around it, which is as it should be. However, I have now inserted rollover images into the page using Dreamweaver 4’s Insert > Interactive image > Rollover image menu. I don’t want the rollover images having the grey border that the thumbnails have but can’t figure out how to do it: whatever I do, when I hover over the image the image swaps fine but the grey border remains.
Please help! Anyone tell me how I should be marking up my rollover image so it doesn’t have the grey border..?
Many thanks.
As per my knowledge of CSS (which is not very good) you may try this:
a.thumbs:hover img {
height: 5.5em;
margin: 0 auto 0.3em;
padding: 2 2;
/*border: thin #E6E6E6 solid */
}
Let me know if it will help you.
Try this one. I have tested it.
As I'm really pressed for time on this now I've gone for a slightly different approach: I've altered my original images so they have a 2 pixel grey border and have set the border attribute for the thumbs img to none.
Once I have some more spare time I shall return to your tag suggestions and try and get them to do what I want.
Many thanks for your help, enjoy the rest of your day..! :)
whatever I do, when I hover over the image the image swaps fine but the grey border remains.
Welcome aboard rosiedoon, the solution above should have worked - are your thumbs activated by the link or the image itself? The CSS is not always the "full story." Rolling over an image or div will not always work, you need to use the anchor object to activate mouseovers:
<a href="full_image.jpg" onMouseOver="some_function();"><img src="thumb_image"></a>
not
<a href="full_image.jpg"><img src="thumb_image" onMouseOver="some_function();"></a>
That said, if you style the anchor and not the image, the hover should work.
I also have a question though, why would you use image rollover for a image gallery?
My images are so:
<a href="#" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('Image71','','images/title1.png',1)"><img name="Image71" border="0" src="images/test.png" width="60" height="75"></a><a href="images/test.png"></a>
The scripting is provided automatically by Dreamweaver's rollover wizard.
Thanks for advice!
I read the posting instructions and so kept my posted code to a minimum, basically. Agreed, there could be something else going on, I'll put my HTML below.
I have a thumbnail gallery and each thumbnail is a still from a short film. The user hovers over the thumbnail to reveal the title of the film, and clicks the title to go to the film page. That's the idea anyway..!
The original code in the page was borrowed and I've adapted it, so I guess I'm finding it difficult trying to unpick things I only half understand. OK, here's my HTML, let me know if it would be helpful to have all the css too.., thanks guys!:
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="harve.css" type="text/css">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('images/title1.png')">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, os nutus fere persto quibus utrum.Pneum suscipere,
consequat consectetuer, erat tristique.
</p>
<p>Luctus dolus vulputate ne, gilvus wisi suscipit jus fatua indoles esca abluo
zelus scisco ullamcorper.</p>
<div class="thumbs">
<!-- thumbs container -->
<p> </p><hr noshade>
<br>
<ul>
<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image71','','images/title1.png',1)"><img name="Image71" border="0" src="images/test.png" width="60" height="75"></a><a href="images/test.png">
</a></li>
<li>...various other thumbnail images...</li>
</ul>
<hr noshade>
<br><p> </p>
</div>
<!-- end thumbs container -->
<p> </p>
<p> </p>
<p>Home ¦ <a href="mailto:#">Contact</a>
<p>
</body>
</html>
You almost have it here:
.thumbs img { border: thin #E6E6E6 solid; }
Note that just like your html, the css selectors follow the same order, so the "longhand" would be
.thumbs ul li a { border: thin #E6E6E6 solid; }
Inside the div class "thumbs" you have a ul, inside which is an li, inside which is an anchor, inside which is an image.
Since there are no other links inside the container thumbs this shorter version will work:
.thumbs a:link { border: thin #E6E6E6 solid; }
.thumbs a:hover { border: none; }
With this example you will have to fiddle with the image margin and padding a bit as the border is on the anchor and not the image.
I am pretty sure you can use the same techniques to apply style to the image instead of the anchor, but I'd have to experiment with this to see if it's correct:
.thumbs a:link img { border: thin #E6E6E6 solid; }
.thumbs a:hover img { border: none; }
One last recommendation that is off topic but important nonetheless:
The user hovers over the thumbnail to reveal the title of the film.
This is called Mystery Meat Navigation [webpagesthatsuck.com] - use the preceding link to see why it should be avoided.
If you really wanted it though, it could be done in a method without javascript (which is generally desirable) by using a background image, and then on hover make a hidden text div visible, which would appear over the movie image. You could also just do a background swap to one with the title, instead of including the hidden text, but it's not a very good idea.
As mentioned, it's probably not the best idea to do that type of linking at all. Things should be clear so that you know what you're options are BEFORE having to hover over every option; it's not intuitive or convieniant, and both are EXTREMELY important in web design.
