Forum Moderators: not2easy
CSS code for hover for one image:
div#text1 a:hover spanimage {top: 300px;
left: 300px;
width:
border: none}
div#inner a:hover spanimage {display: block;
border-color: black;
position:relative;
background:none;
font-size:14px}
HTML for all images:
<body>
<div id="outer">
<div id="inner">
<div class="bgtext">millee</div>
<div class= "footertext">a dream of literacy in every village</div>
<div id="text1"><a href="home.html">basic<span>»what we do</span><spanimage><IMG Src="pics/monkeying around.jpg" vspace=0 hspace=0 width="200" height="160"></spanimage></a></div>
<div id="text2"><a href="info.html">details<span>»it's all in the details</span><spanimage><IMG Src="pics/boy phone smile rounded.jpg" vspace=0 hspace=0 width="160" height="200" border="0"></spanimage></a></div>
<div id="text3"><a href="words.html">words<span>»how do we do what we do</span><spanimage><IMG Src="pics/two girls phones round_2.jpg" width="200" height="160" border="0"></spanimage></a></div>
<div id="text4"><a href="faces.html">faces<span>»who we are</span><spanimage><IMG Src="pics/two girls bright.jpg" width="160" height="200" border="0"></spanimage></a></div>
<div id="text5"><a href="thanks.html">thanks<span>»without you, where would we be</span><spanimage><IMG Src="pics/two boys trees.jpg" width="160" height="200" border="0"></spanimage></a></div>
<div id="text6"><a href="http://example.com">blog<span>»a penny for your thoughts</span><spanimage><IMG Src="pics/everyone watching one.jpg" width="160" height="200" border="0"></spanimage></a></div>
<div id="text7"><a href="contact.html">contact us</a></div>
<div id="text8"><a href="give.html">give<span>»how can i help?</span><spanimage><IMG Src="pics/two girls colors bench.jpg" width="160" height="200" border="0"></spanimage></a></div>
</div>
</div>
As a side note, I struggled big time to get the borders to disappear since the images were taken as links, and hence automatically were given borders, but I think the way I've coded it works for all browsers (as far as no borders go)!
Please help! I am going crazy!
Thanks,
Shabnam
[edited by: swa66 at 12:29 pm (utc) on Oct. 14, 2009]
[edit reason] no specifics such as urls, use example.com instead [/edit]
e.g.:
You need to urlencode urls that contain spaces (but why would you not name our files without a space in them?)
<spanimage> ? In xml you can create your tags yourself, in html you're stuck with what you're given.
"width: " is a syntax error (might be a cut&paste error). If you don't want to set a value, remove the line. The error will likely propagate in some browsers to the next line and remove that from being parsed as well.
Always clearly say what version of IE: e.g. there's a big difference how IE8 works from how IE6 works.
I fixed all the validation errors and fixed my code. it now works!
yay
