The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Need really quick help please!, HTML picture disappears
alymarcotte
post Jul 27 2010, 09:58 AM
Post #1


Newbie
*

Group: Members
Posts: 11
Joined: 3-September 08
Member No.: 6,579



Hey guys!
Doing some work and need quick help.
I am working on http://www.djcarchitect.com/portfolio/page...ginaimages.html and I need it so that there is an image from the getgo, not that you have to click to see an image. and that the images don't disappear when you click to the side. Does anyone know how to make that happen? Here is the HTML if that helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<style type="text/css">
#scroller {width:700px; height:360px; position:relative;padding:5px 0; background:#fff; margin:0 auto 10px auto;}
#scroller em {display:block; width:229px; height:175px; position:absolute; top:0; right:0; border:1px solid #ddd;}
#scroller span {display:block; width:360px; height:365px; position:absolute; top:0; left:0; border:1px solid #ddd;}

#scroller b#thumbs {display:block; width:135px; height:337px; overflow:auto; float:right; margin-top:0px; border:1px solid #ccc; border-width:0px 0px 0px 0px; padding:5px;}
#scroller b#thumbs a {display:block; float:left; margin:0 10px 10px 0; background:#f8f8ff; width:50px; height:50px; border:1px solid #000;}
#scroller b#thumbs a img {width:50px; height:50px; border:0;}

#scroller b#thumbs a:hover {border:1px dotted #ccc; background:#fff url(file:///G|/PROMOTIONAL/Test/click_on.gif);}
#scroller b#thumbs a:active, #scroller b#thumbs a:focus {border:1px solid #fff; background:#fff; outline:0;}
#scroller b#thumbs a:hover img {display:block; position:absolute; background:#aaa; z-index:500;}
#scroller b#thumbs a:active img, #scroller b#thumbs a:focus img {display:block; position:absolute; background:#aaa; z-index:100;}

#scroller b#thumbs a:active img.hr, #scroller b#thumbs a:focus img.hr {width:506px; height:337px; left:20px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:active img.vt, #scroller b#thumbs a:focus img.vt {width:506px; height:337px; left:20px; top:7px; border:1px solid #333;}

</style>
<!--[if IE]>
<style type="text/css">
#scroller b {
scrollbar-arrow-color: #333;
scrollbar-3dlight-color: #bbb;
scrollbar-highlight-color: #eee;
scrollbar-face-color: #bbb;
scrollbar-shadow-color: #eee;
scrollbar-darkshadow-color: #bbb;
scrollbar-track-color: #fff;
}
</style>
<![endif]-->

</head>


</div> <!-- end of header -->


<div id="info">
<div id="scroller"><b id="thumbs">
<a href="#nogo"><img src="../../images/Regina/Aerial Persp NW closed.jpg" width="506" height="337" class="hr" /></a>
<a href="#nogo"><img src="../../images/Regina/accomplishments.jpg" width="506" height="337" class="hr" /></a>
<a href="#nogo"><img src="../../images/Regina/Persp INT Stadium0110.jpg" width="506" height="337" class="vt" /></a>
<a href="#nogo"><img src="../../images/Persp INT SunTerrace0060.jpg" width="506" height="337" class="hr" /></a>
<a href="#nogo"><img src="../../images/Persp NW0000.jpg" width="506" height="337" class="hr" /></a>
<a href="#nogo"><img src="../../images/Persp NW020000.jpg" width="506" height="337" class="hr" /></a>
<a href="#nogo"><img src="../../images/Persp SE0060.jpg" width="506" height="337" class="vt" /></a>
<a href="#nogo"><img src="../../images/Persp SW0000.jpg" width="506" height="337" class="vt" /></a>
</b></div>


</div> <!-- end of info -->


<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>
</body>
</html>


THANK YOU!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 28 2010, 03:38 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You have some markup errors which you should fix with the validator (links at top/bottom of this page).

Further, file:///G|/PROMOTIONAL/Test/click_on.gif is an image which points to a local file on your computer on #scroller b#thumbs a:hover. Upload tat image to your webspace and change its path in the CSS declaration accordingly.

And go see http://www.cssplay.co.uk/menu/, where you'll fnd a lot of photo gallery samples. There's also one that looks like yours (I just didn't take the time to look for it).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th July 2019 - 04:20 AM