|
Title: Web design... how did they do this? Post by: BTM on July 24, 2007, 02:25:12 PM Okay, I'm bit embarrassed to say I'm not sure how they did this, I really SHOULD know it, but there's some things I'm fuzzy about. Didn't want to post this question in the newsgroups because they're full of condescending ass monkeys.
Anyway, bit of background, still doing my internship, now I'm working on a website for a local children's shelter that's going to be opening soon. As part of my research, I started visiting other children's shelter websites and came across this one. http://www.cscshelter.org/news.php (http://www.cscshelter.org/news.php) The top banner fascinated me. You have this one graphic with text on it, and all these rollover links that change color when you hover your mouse over them. I saved the site and opened it in Macromedia Dreamweaver to find that, as I suspected, it's all one large table with several smaller graphics next to each other make one big graphic. I'm trying to do something similar on my page, but it's just NOT working out right. I've got a completed graphic, now I'm trying to use slices to make rollover images and I just can't seem to get it function right. So, I'm wondering how these guys did this. I mean, did they have the whole graphic first, copied parts of the background, created the rollovers then "added" the rollovers back in? Seems like there should be a simpler way. I know if I wanted to make it an image map, I could just use the hotspot function, but that wouldn't give the rollovers I want. I'm certain it's rather simple, but I've been at this problem so long my mind's turned to cheese. Gonna take a break and focus on something else for a bit. Appreciate the help! Title: Re: Web design... how did they do this? Post by: CheezeFlixz on July 24, 2007, 02:32:55 PM Java script roll over images, nothing fancy.
There is a roll over color change for text also I'm not in the puter where I have that code but I can get if needed. This is in the <HEAD> of that page. <script language='JavaScript' type="text/javascript"> <!-- //alert(' you are here...'); var imageList = new Array(); imageList[0] = "/_images/new_header/header_4_over.jpg" imageList[1] = "/_images/new_header/header_6_over.jpg" imageList[2] = "/_images/new_header/header_8_over.jpg" imageList[3] = "/_images/new_header/header_10_over.jpg" imageList[4] = "/_images/new_header/header_12_over.jpg" imageList[5] = "/_images/new_header/header_14_over.jpg" imageList[6] = "/_images/new_header/header_15_over.jpg" imageList[7] = "/_images/new_header/header_17_over.jpg" imageList[8] = "/_images/new_header/header_19_over.jpg" imageList[9] = "/_images/new_header/header_21_over.jpg" imageList[10] = "/_images/new_header/header_23_over.jpg" preloadImages(imageList); //--> </script> There's a little more to it but that's the gist of it. Title: Re: Web design... how did they do this? Post by: DodgingGrunge on July 24, 2007, 03:42:15 PM You could alternatively make a CSS class and trigger the change on the "hover" event. This may be useful since some people turn off JavaScript capability to prevent things like popup ads.
If you'd prefer image rollovers, versus text-based effects, use a list item's background-image property: LI.topmenu { background-image: url('imgFile1.jpg'); } LI.topmenu:hover { background-image: url('imgFile2.jpg'); } Of course, to make sure all of the image shows up, you'd want to set the width and height properties, among others, but you get the idea. Or if not, PM me. :teddyr: Title: Re: Web design... how did they do this? Post by: PSlugworth on July 24, 2007, 08:31:35 PM You can also automatically generate it in Adobe Photoshop using the slice tool and "save for web."
Title: Re: Web design... how did they do this? Post by: PSlugworth on July 29, 2007, 03:12:28 PM Ah! My apologies, it's been a while since I've done this.
You make an image with two layers in Photoshop, the top layer being the highlighted text and the bottom layer being the regular one. Make each text element a single slice. Now click the Edit in ImageReady button. Hide the top (highlight) layer. Go to Window > Web Content. Now select each slice and click the "add rollover state" button on the little Web Content palette. While it's selected, make the top layer visible. Select the next slice and repeat the process. If you don't have ImageReady, you can make all of the different slices in Photoshop, save for web, and hand-code the rollover stuff in the html file. There are some tutorials for that on the web that can describe it better than I ever would. Title: Re: Web design... how did they do this? Post by: ulthar on July 29, 2007, 05:42:19 PM The css technique Grunge mentioned is the way I do menus nowadays. I prefer css to javascript (for a host of reasons), and it's fairly easy to make pop out/pop down menus as well. The only thing I use JS for at all anymore is AJAX-ey stuff.
Benefits of css based menus: Use one image (the background) All links are text (no multiple images to load, but more importantly, SE friendly TEXT links!!!) Dirt simple to change the look of the menu - change a color or font in the css file and bam, you're done. No create a new image, mess with an image editor, etc. Title: Re: Web design... how did they do this? Post by: CheezeFlixz on July 29, 2007, 05:50:39 PM The one I use a lot is simple and doesn't require making images ...
<STYLE TYPE='text/css'> <!-- TextRollover-1 --> a:link { color:#0000FF; text-decoration:none} a:visited { color:#990000; text-decoration:underline} a:hover { color:#FF0000; text-decoration:underline; cursor:default} a:active { color:#0000FF; text-decoration:none} </STYLE> You can change it as needed. Pretty clear how to alter it and it's CSS. Just stick it in the <HEAD> Edit:Typo Title: Re: Web design... how did they do this? Post by: ulthar on July 29, 2007, 06:14:45 PM Right, Cheese. I'd just make one comment (of little to no value, probably :teddyr: ).
Tying the css into the LI tags like Grunge outlined allows one to fairly easily go to pop-out/pop-down menus if you want to (later, perhaps). This is really good from the standpoint of keeping the number of main choices in your nav bar small (should shoot for less than 7 from what I understand), while at the same time, exposing the text of ALL of your nav links to Google's bots. The method you showed is essentially the central piece of that equation, we just wrap that formatting with some css layout "magic" to create the pop-down/pop-out. This page (http://www.seoconsultants.com/css/menus/tutorial/) shows the basics of how to do it with the method in action on the page's side nav bar. There is no javascript on that page. :smile: Title: Re: Web design... how did they do this? Post by: CheezeFlixz on July 29, 2007, 06:50:45 PM Might have to try those ... I haven't done much in the way of web design work in a pretty long time (internet time speaking) it got to changing faster than I had time to keep up with so I just drifted away from it. AS I had very little time to mess with it anyway. The server I was using at the time didn't handle a lot of the (then) new stuff (does now) and it was just more trouble than it was worth to me to keep up and change everything. So admittedly most of my knowledge is old and rusty, much like myself.
Been reading a little on the php, asp and all that is new now as I've have thought of building a new site (like I need one) so I'll be bookmarking that site for reference. |