SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: Image swaps...

  1. #1
    SitePoint Enthusiast akayani's Avatar
    Join Date
    Aug 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image swaps...

    I'm pulling my hair out here... as ya do...

    http://people.aapt.net.au/~theyan/un...pen_div_z.html

    the css is in http://people.aapt.net.au/~theyan/un...rpen_div_z.css

    Why is it that I can't get the background images to work?

    Yani

  2. #2
    SitePoint Zealot bobber205's Avatar
    Join Date
    Sep 2006
    Location
    Oregon
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you certain that the images are really there?

    "Not Found

    The requested URL /~theyan/uni/css_images/menu_bg.jpg was not found on this server."
    I can't find them.

    Just a thought. Btw. When doing background images, be consistient with the background or background-image. I would recommend the latter.

  3. #3
    SitePoint Enthusiast akayani's Avatar
    Join Date
    Aug 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No it's definately there. You should be able to look inside those directories.

    was going to add that I used concepts from here

    http://www.pmob.co.uk/temp/cssrollovertabs.htm

    for the tab buttons and here for the second image...

    http://www.cssplay.co.uk/menu/magnify.html#nogo

    I need to get the background showing in the buttons and to get a default image for the big pic.

    They aren't the final pics just roughs.

    Yani

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    No it's definately there. You should be able to look inside those directories.
    I looked in those directories and this image is not there !
    http://people.aapt.net.au/~theyan/un...s/rollover.png

    However this image is in there:
    http://people.aapt.net.au/~theyan/uni/images/rollon.png

    I've never heard of a b1 or a b2 html element before either.

    Code:
    #imageholder b1 {
    /*position:relative;*/
    /*position:absolute;*/
    background: url(../images/rollover.png); /*background of bar */
    float:left; /* float means they line up themselves */
    width: 65px; /* tags for position of tabs */
    height: 18px;
    }
    Did you mean a.b1 and a.b2 etc.

  5. #5
    SitePoint Enthusiast akayani's Avatar
    Join Date
    Aug 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I'm just getting my head around this... I'm using your base code too Paul. This one (well I have basteadized it)http://www.pmob.co.uk/temp/cssrollovertabs.htm

    I had that working great but I couldn't work out how to position the second image... IE large so that it didn't indent with the menu.

    It's my first play with CSS a Uni assignment but it will be posted with Foster on www.unleash.com eventually.

    I'm a bit thick at present understanding the difference between # . a * but I'm sure the pennys will start to drop soon they usually do.

    The help is much appreciated. I'll look at "a." now.

    Thanks again,

    Yani

  6. #6
    SitePoint Enthusiast akayani's Avatar
    Join Date
    Aug 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    humm that makes the large pic follow the left margin of the buttons. Maybe I should go back to the original example which had only one problem where the large image was placed and work from there. Getting late here in Australia that might be a toomorrow job.

    Yani

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Getting late here in Australia that might be a tomorrow job.
    If you can't work it out then post again and I'll take a look.

  8. #8
    SitePoint Enthusiast akayani's Avatar
    Join Date
    Aug 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I've recoded this using your original CSS.

    http://people.aapt.net.au/~theyan/un...pen_div_y.html

    These are the issues I have.

    Getting the big pic in a consistent place.
    Removing the extra button (image).
    Getting a single big pic to display as default.

    And understanding why in IE the right sidebar drops below the top of the page.

    I'm not going to muck with this any more until I hear back from you. I think that just added confussion.

    The object is to make it work WITHOUT Java script.

    If what I'm trying to acheive can't be done without Java then that is OK. The exercise is to push CSS as far as possible.

    Thanks,

    Yani

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you actually talking about something more like this: http://www.cssplay.co.uk/menu/gallery.html

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I would do it like this and put the top nav images in the background and the you don't need to absolutely place the span. In that way you can place the other image more easily in respect to the ul and not the list.

    You can display the initial image by adding a class to it and giving it the same styles as the hover.

    To hide the image just move it off screen and then bring it back on hover.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- its Transitional cause at one point I was just a little old code "br clear all" 
    changed the layout since then and I can maybe delete this and go for strict -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <!-- not uing xml but this will be part of my standard header -->
    <head>
    <title>Experiments for Sharpening in Photoshop</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="css/ps_sharpen_div_y.css" />
    <style>
    /*background-color:#FFFFFF  white */
    
    
    /* * {margin:0;padding:0} zero the browser before you start */
    
    /* basic styles for fonts */
    
    h1, h2, h3, h4, h5, h6 {
    	font-family: Humanst521 BT, Frutiger, Gill Sans, Verdana, Helvetica, Arial, sans-serif;
    	color:#333333;
    	text-align: left;
    	letter-spacing: .3mm;
    	word-spacing: .8mm;
    }
    
    p, ol, a {
    	font-family: Verdana, Arial, Helvetica, sans-serif; 
    		font-size: small;
    		text-align:left;
    }
    
    blockquote {
    	font-family: Verdana, Arial, Helvetica, sans-serif; 
    	font-size: small;
    	text-align:left;
    }
    
    .centre {
    	text-align: center;
    }
    
    
    /*center the frame http://www.yourhtmlsource.com/stylesheets/csslayout.html
    works for ie but not firefox ...crap code that was...
    http://www.communitymx.com/content/article.cfm?cid=F41AE&print=true */
    
    
    /* div block styles */
    
    /* the magic code that centre the layout */
    body {
    text-align: center;
    margin: 0px;
    padding: 0px;
    min-width:865px;/* stop mozilla sliding off the edge */
    }
    
    .screen_holder {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 865px;
    text-align: left;
    }
    /* end of the magic code */
    
    
    
    #container {
    	/*position: absolute;*/
    	width: 865px;
    	/*margin-left:0px;*/
    	padding: 0px;
    	/*background-color: /*#ffffff*/;
    	text-align:left;
    }
    
    #heading {
    	/*position: absolute;*/
    	float:left;
    	width: 551px;
    	margin-left:0px;
    	margin-top: 16px;
    	padding: 0px;
    	background-color: white ;
    }
    
    #main_content{
    	/*position: absolute;*/
    	float:left;
    	width: 560px;
    	top: 90px;
    	margin-left:0px;
    	padding: 0px;
    	background-color: white;
    	text-align:left;
    	
    }
    
    
    #sidebar {
    	float:right;
    	top:0px;
    	position: static;
    	margin-top: -7px;
    	width: 250px;
    	bottom: 0px;
    	left:590px;
    	padding: 20px;
    	line-height: 150%;
    	background-image:url(http://people.aapt.net.au/~theyan/uni/images/sidebar_patch.jpg);
    	text-align:left;
    }
    
    #w3cicon {
    	/*float:left;*/
    	margin-left: 170px;
    	bottom: 0px;
    	text-align:left;
    	background-color: #f0f8ff;
    }
    
    
    
    
    
    
    /*styles for the menu block*/
    ul { 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    width:550px;	/* added */
    height:425px;
    position:relative;
    } 
    ul#imageholder li { 
    font-family: arial, verdana, helvetica, sans-serif; 
    float:left; 
    width: 65px; 
    height: 18px; 
    margin: 0 10px 0 0; 
    padding: 0; 
    background:url(http://people.aapt.net.au/~theyan/uni/images/rollover.png) no-repeat; 
    } 
    #imageholder li a { 
    font-size: 11px; 
    width: 65px; 
    height: 18px; 
    text-decoration: none; 
    text-align:center;
    float:left;
    background:url(http://people.aapt.net.au/~theyan/uni/images/rolloff.png) no-repeat left top; 
    } 
    #imageholder li a img.large {
    left:-999em;
    position:absolute;
    width:550px; 
    height:400px; 
    top:25px;
    border:0;
    }
    #imageholder li a img.first,
    #imageholder li a:hover img.large{ /*for the pop up */
    left:0;
    }
    #imageholder a:hover {color:#000;background:transparent;visibility:visible} 
    
    </style>
    </head>
    <body>
    <div class="screen_holder">
    	<div id="container">
    		<div id="heading"> <img src="http://people.aapt.net.au/~theyan/uni/images/exp_guide.png" alt="An experimental guide to sharpening in Adobe Photoshop" width="550" height="59" />
    			<div id="main_content">
    				<h3>Why Sharpen</h3>
    				<p> The application of unsharp masking was traditionally applied to images in order to compensate for slight variations in the registration of colour plates used in 4 colour printing. This was applied by the scanner operator at time of scanning. </p>
    				<p> Today, with the increase in the number of images derived from digital cameras, the responsibility for sharpening and other post creation processing rests primarily with the author of the image, the photographer. This tutorial will assist you to explore some techniques for sharpening and image manipulation that which are outside the ordinary. </p>
    				<ul id="imageholder">
    					<li class="b1"><a href="images/untouched.jpg" target="_blank">Base <img  src="http://people.aapt.net.au/~theyan/uni/images/untouched.jpg" alt="" width="550" height="400" class="large first" /> </a> </li>
    					<li class="b2"><a href="images/wnr.jpg" target="_blank"> WNR <img  src="http://people.aapt.net.au/~theyan/uni/images/wnr.jpg" alt="" width="550" height="400" class="large" /> </a> </li>
    					<li class="b3"><a href="images/dps.png" target="_blank">DPS <img  src="http://people.aapt.net.au/~theyan/uni/images/dps.jpg" alt="" width="550" height="400" class="large" /> </a> </li>
    					<li class="b4"><a href="images/hps.png" target="_blank"> HPS <img  src="http://people.aapt.net.au/~theyan/uni/images/hps.jpg" alt="" width="550" height="400" class="large" /> </a> </li>
    					<li class="b5"><a href="images/dia.png" target="_blank"> &nbsp;DIA
    						<!-- just needs to be nudged right a bit hence the nbsp -->
    						<img  src="http://people.aapt.net.au/~theyan/uni/images/dia.png" alt="" width="550" height="400" class="large" /> </a> </li>
    				</ul>
    			</div>
    			<!-- end image holder -->
    			<h3>Image Preparation</h3>
    			<!-- <img src="http://people.aapt.net.au/~theyan/uni/untouched100asa.jpg" alt="The test image" width="550" height="412" /> -->
    			<p> For the purpose of this test, choose an image that can benefit from substantial sharpening such as a landscape or a photo of a hard object like a car (as above). Alternatively, use the image provided. Often a portrait can benefit from selective sharpening of say hair but for our purposes it is better to use an image where sharpening can be applied
    				to the whole image, at least in this initial phase to get a handle on the technique. </p>
    			<!-- <p><img src="http://people.aapt.net.au/~theyan/uni/layer_dia.png" alt="Photoshop Layers Dialogue" align="left" /> -->
    			<!-- Thank to Berlina for providing this link to help me out 
    			with text alingment http://www.ironspider.ca/graphics/alignment.htm -->
    			<p> Open your image in Photoshop and do any initial corrections that you would normally apply. Do NOT apply any sharpening at this point. Keep this image in tact and do NOT apply any of the following effects to your base image, rather duplicate the image on another layer so you can easily compare the original image with any altered image generated.
    				The layer visibility dialogue can be used for this purpose. </p>
    			<p> Sharpening works better on images with a minimum of digital noise. Duplicate the image on a new layer and process using a noise reduction tool such as Noise Ninja. Again apply no sharpening. For all future processing use this image, name it NRWI "Noise Reduced Working Image". Keep the base image for comparison. </p>
    			<!-- Note that br is an empty element, just like meta and img, so it's written as <br />
    			as per what is said here... http://www.sitepoint.com/article/html-css-beginners-guide/2 -->
    			<hr />
    			<h3>Double Pass Sharpening</h3>
    			<!-- <img src="http://people.aapt.net.au/~theyan/uni/dps.jpg" alt="Double Pass Sharpened" width="550" height="412" /> -->
    			<p><b>Follow these steps...</b></p>
    			<ol>
    				<li>Duplicate WNR on another layer, call it DPS</li>
    				<li>Apply the filter Unsharp Mask using settings Amount 50% Radius 10-50* Threshold 0-20</li>
    				<li>Apply Unsharp Mask a second time using settings Amount 200% Radius .2-.8*</li>
    			</ol>
    			<!-- Thanks to the tutorial questions I had a reference on how to do the above -->
    			<p> View the result by making only the layer DPS visible.</p>
    			<hr />
    			<!-- yea har another self closing tag -->
    			<h3>High Pass Sharpening</h3>
    			<p><b>Follow these steps...</b></p>
    			<ol>
    				<li>Duplicate WNR on another layer, call it HP</li>
    				<li>Apply a High Pass filter 2-10 Pixels* (Filters/Other/High Pass)</li>
    				<li>Select soft light as a blend mode</li>
    			</ol>
    			<p> View the result by making visible both WNR and HP layers. </p>
    			<p> Experiment using other blend modes for layer HP, Hard Light will produce greater sharpening effect. You can also apply sharpening to the HP layer directly and or reduce the effect by varying the HP layer opacity. </p>
    			<hr>
    			</hr>
    			<p> These two techniques provide opportunities for a high level of control over image sharpening, however there is no one way that is correct for all images. They can be applied to a selected area of an image by using a selection mask or in the case of the High Pass method by retouching the sharpening mask. Experiment and see what results can be
    				achieved. </p>
    			<p> * Note - These setting vary depending on the number of pixels that make up the image. The correct settings for any image can only be judged after application. Some skill is required. </p>
    		</div>
    		<!-- end main copy block -->
    	</div>
    	<!-- end heading -->
    	<div id="sidebar"> &nbsp; <img src="http://people.aapt.net.au/~theyan/uni/images/more_resources_w.png" alt="More Resources" width="224" height="62" />
    		<!-- nbsp to trim spacing of graphic to centre -->
    		<h3 class="centre">Photoshop Actions</h3>
    		<p> So you want an easy way to test these sharpening proceedures. No problem... here is a link to a set of Photoshop actions that have been recorded for your use. You may need to adjust some of the values to suit your image. Should you choose to apply noise reduction, you will need to do so manually first. </p>
    		<a href="bits/sharpening.atn">Recorded Sharpening Actions</a> <br />
    		<h3 class="centre">Test Image</h3>
    		<p> Should you want to use the same image as this tutorial, it is available using this link. </p>
    		<a href="blue_jeep.psd">Blue Jeep in Photoshop Format</a> <br />
    		<h3 class="centre">Noise Ninja</h3>
    		<p> Every now and then through word of mouth usually, you are introduced to software that is truly extraordinary. Noise Ninja is just such a program. </p>
    		<p> So what is this Noise Ninja? To quote from their site. </p>
    		<p><i> Noise Ninja is the most effective and productive solution for removing noise and grain from digital photographs and scanned film images. It is a must-have tool for anyone shooting in low-light or fast-action situations - including news, sports, wedding, and event coverage - where high ISO photography is required and the resulting noise compromises
    				the image. <br />
    			<br />
    			Noise Ninja often yields a two-stop improvement in effective image quality, while preserving important image detail. In addition, it can produce cleaner, smoother enlargements from low-ISO images. (Picturecode 2006) </i></p>
    		<p> Picturecode is a two man team; founder Dr. Jim Christian holds an undergraduate degree in computer science from Harvard, and both a Ph.D. in computer science and an M.B.A. from the University of Texas at Austin. Manager of Operations Fernando Zapata earned an undergraduate degree in computer science from the University of Texas at Austin. </p>
    		<p> These guys are smart cookies with a passionate interest in computing and photography. And that shows in the quality of this extraordinary product. </p>
    		<a href="http://www.picturecode.com">Get the Ninja at Picturecode!</a> <br />
    		<br />
    		<div id="w3cicon"> <a href="http://validator.w3.org/check?uri=referer"><img
    		src="http://people.aapt.net.au/~theyan/uni/http://www.w3.org/Icons/valid-xhtml10"
    		alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> </div>
    		<!-- end w3cico -->
    	</div>
    	<!--end sidebar-->
    </div>
    <!--end container-->
    </div>
    <!-- end screen_holder -->
    </body>
    </html>
    (The message board may corrupt the lnk paths above so you may need to reset.)

    You also have a problem with the images in IE because it seems ot think they are bitmaps and this usually means that the images are corrupt or my cache is full. I have cleared my cache and the images are still displaying incorrectly and taking ages to load so they must be corrupt in some way.

    Make some new images and save them as jpgs or gifs.

    Hope it helps

  11. #11
    SitePoint Enthusiast akayani's Avatar
    Join Date
    Aug 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I changed 'left:-999em;' to 'left:-999px; and low and behold it works perfectly.

    I'll clean up the other issues in the next few days and maybe take a better pic for the example and post the final result back here. I'm still seeing a shift to the bottom of the body with the right col in IE7. I think i can deal with that if not I'll look at some of the past threads here, seems to be a lot of stuff on that issue in the forum. I did read something about moving the style for right col object into the div section on the web page itself. That might be the solution.

    Thanks heaps for that. Reading the code and how you have approached the problem, it's a great insight. The leturer, Edwin, at Curtin Uni in WA (Aus) first pointed to your examples. I think his comment was, "this guy is it for CSS". I'm on the other side of the country to Edwin, and you are on the other side of the world. Fantastic stuff this Internet ah!

    Much appreciated!

    Yani

  12. #12
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trust people from Perth to know what's what.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •