Bad Movie Logo
"A website to the detriment of good film"
Custom Search
HOMEB-MOVIE REVIEWSREADER REVIEWSFORUMINTERVIEWSUPDATESABOUT
Welcome, Guest. Please login or register.
Did you miss your activation email?
March 28, 2024, 02:06:55 PM
713354 Posts in 53057 Topics by 7725 Members
Latest Member: wibwao
Badmovies.org Forum  |  Other Topics  |  Off Topic Discussion  |  Web design... how did they do this? « previous next »
Pages: [1]
Author Topic: Web design... how did they do this?  (Read 4796 times)
BTM
Frightening Fanatic of Horrible Cinema
****

Karma: 352
Posts: 2865



« 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 

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!
« Last Edit: July 24, 2007, 03:57:53 PM by BTM » Logged

"Some people mature, some just get older." -Andrew Vachss
CheezeFlixz
Frightening Fanatic of Horrible Cinema
****

Karma: 496
Posts: 3747


Pathetic Earthlings


WWW
« Reply #1 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.


Logged

DodgingGrunge
Bad Movie Lover
***

Karma: 67
Posts: 434


Consistency is the hobgoblin of small minds.


WWW
« Reply #2 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
Logged

++josh;
PSlugworth
Dedicated Viewer
**

Karma: 1
Posts: 61



WWW
« Reply #3 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."
Logged

Official Member of the Don Knotts Fan Club.
andrew sylvester dot com
PSlugworth
Dedicated Viewer
**

Karma: 1
Posts: 61



WWW
« Reply #4 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.
Logged

Official Member of the Don Knotts Fan Club.
andrew sylvester dot com
ulthar
Frightening Fanatic of Horrible Cinema
****

Karma: 368
Posts: 4168


I AM serious, and stop calling me Shirley


WWW
« Reply #5 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.

Logged

------------------------------------------------------------------------------------------------

Professor Hathaway:  I noticed you stopped stuttering.
Bodie:      I've been giving myself shock treatments.
Professor Hathaway: Up the voltage.

--Real Genius
CheezeFlixz
Frightening Fanatic of Horrible Cinema
****

Karma: 496
Posts: 3747


Pathetic Earthlings


WWW
« Reply #6 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
« Last Edit: July 29, 2007, 06:39:58 PM by CheezeFlixz » Logged

ulthar
Frightening Fanatic of Horrible Cinema
****

Karma: 368
Posts: 4168


I AM serious, and stop calling me Shirley


WWW
« Reply #7 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 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
Logged

------------------------------------------------------------------------------------------------

Professor Hathaway:  I noticed you stopped stuttering.
Bodie:      I've been giving myself shock treatments.
Professor Hathaway: Up the voltage.

--Real Genius
CheezeFlixz
Frightening Fanatic of Horrible Cinema
****

Karma: 496
Posts: 3747


Pathetic Earthlings


WWW
« Reply #8 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.   
Logged

Pages: [1]
Badmovies.org Forum  |  Other Topics  |  Off Topic Discussion  |  Web design... how did they do this? « previous next »
    Jump to:  


    RSS Feed Subscribe Subscribe by RSS
    Email Subscribe Subscribe by Email


    Popular Articles
    How To Find A Bad Movie

    The Champions of Justice

    Plan 9 from Outer Space

    Manos, The Hands of Fate

    Podcast: Todd the Convenience Store Clerk

    Faster, Pussycat! Kill! Kill!

    Dragonball: The Magic Begins

    Cool As Ice

    The Educational Archives: Driver's Ed

    Godzilla vs. Monster Zero

    Do you have a zombie plan?

    FROM THE BADMOVIES.ORG ARCHIVES
    ImageThe Giant Claw - Slime drop

    Earth is visited by a GIANT ANTIMATTER SPACE BUZZARD! Gawk at the amazingly bad bird puppet, or chuckle over the silly dialog. This is one of the greatest b-movies ever made.

    Lesson Learned:
    • Osmosis: os·mo·sis (oz-mo'sis, os-) n., 1. When a bird eats something.

    Subscribe to Badmovies.org and get updates by email:

    HOME B-Movie Reviews Reader Reviews Forum Interviews TV Shows Advertising Information Sideshows Links Contact

    Badmovies.org is owned and operated by Andrew Borntreger. All original content is © 1998 - 2014 by its respective author(s). Image, video, and audio files are used in accordance with the Fair Use Law, and are property of the film copyright holders. You may freely link to any page (.html or .php) on this website, but reproduction in any other form must be authorized by the copyright holder.