How would I go about doing something like this?

Phaser

Phaser

Phaser

Associate
Joined
17 Mar 2004
Posts
1,562
Right, i've pretty much got my design sorted.

http://dziremedia.co.uk/sites/djsniperz/4/

See the icons at the top - I am wanting it so that when users hover over them, the "navigation" text changes to the page name, eg "contact" or "audio".

How would I go about doing this? Am I right in thinking javascript is the way forward?

I have no idea and don't really know where to start.

Any help or pointers appreciated.
 
Personally I would do it in Flash as that's easy for me.

I remember using Layers in HTML before. <layer> etc kind of tags. However these are probably outdated and there's more thna likely a better way of doing it using AJAX.

Unfortunately I'm not familair with AJAX usage however I hope its a point in the right direction.
 
Dup said:
Personally I would do it in Flash as that's easy for me.
Click to expand...

Forgot all about Flash! Unfortunately I don't have a clue how to do in Flash either. :D

I'm just wondering whether it's ok from an accessability point of view...It's the only navigation there (apart from the site map).
 
for me when looking at the example site when hovering over the nav menu it doesn't change anything. Is it supposed to or is it that layout what the example was for?

To do this i think it can simply be done with css, but failing that it can be done with javascript.

for css i'd do something like make the image a <a> link and have it so when someone hovers over them it displays text at a position relative to where it would be, if that makes sense. And then don't know if your wanting a flashy sort of image to appear just make the text an animated gif so it animates.

im fairly certain that will work so no point in me describing how it would work for javascript.

if you have no idea how still to do this i will have a go at it for you as it isn't a very hard thing to do i think, just let me know.

psyr33n said:
However, the real solution is to not have mystery meat navigation. :)
Click to expand...
tbh althought mmn is bad, i think this isn't too bad as it does clearly say where navigation is and the images almost speak for themself
 
Last edited:
Mammalian said:
for me when looking at the example site when hovering over the nav menu it doesn't change anything. Is it supposed to or is it that layout what the example was for?
Click to expand...

At the moment it's just one big image. (The only graphics editing program I have on here is MS Paint!)

I will have a look at the CSS method first of all, and I can't get it sorted with that i'll look at using Javascript.

Cheers for the help so far all.
 
If you wanted the navigation text to change aswell I'm pretty certain you'd have to use some javascript. I don't think you can use CSS to trigger something else to change, only itself.
 
Mammalian said:
tbh althought mmn is bad, i think this isn't too bad as it does clearly say where navigation is and the images almost speak for themself
Click to expand...
I see:
-A computer screen: home?
-A notepad type thing: news?
-A camera: photos
-A calendar: dates
-A gramophone/loudspeaker: audio
-A video camera: videos
-A computer: ???
-A mobile phone: contact?

All these are incredibly ambiguous, and only semi-understood because I'm somewhat accustomed to icons due to seeing a lot of them on the internet. Yes, there are worse out there, but that doesn't make it any better.

Your mother sees:
-?: ???
-???
-A camera: ???
-The number 12: ???
-A gramophone/loudspeaker: ???
-A video camera: ???
-A computer: ???
-A mobile phone: ???

etc.

Not much in the way to distinctly and explicitly label it as navigation - it could quite easily be considered a design element, and as there is no clear page title, the "navigation:" is probably not going to be understood by less frequent internet users, just adding to the confusion.

Overlaid text will go a long way. The target audience for the site may know the score, but it's the principle, and there will always be a number of people who don't get it...

Back on topic, it could be done with CSS, but you'd still need to behaviourally get rid of the "navigation:" text, otherwise there would be two text layers.
 
it can be done with css simply

Code: 
XHTML
------

<div id="Navigation">
<ul>
<li><a href="#"><img src="XX" alt="XX" /><span>Link Text</span></a></li>
<li><a href="#"><img src="XX" alt="XX" /><span>Link Text</span></a></li>
...etc...
</ul></div>

CSS
----

#Navigation {position:relative}
#Navigation ul {width:400px;float:right}
#Navigation ul li {list-style:none;float:right}
#Navigation ul li a span {visability:hidden;position:absolute;left:0;}
#Navigation ul li a:hover span {visability:visible}

thats just the core functionality, it may not look how you want it to but you can change that with some more positioning etc.
 
Last edited:
Hi can i ask a question.

I really like they way you've done the 'when & where' and mailing list sections.

I cant see where you've defined the divs to get the layout over there as opposed to ending up underneath the normal container.

Would you mind letting me know how you've done it?
 
2 divs, one floated left, one floated right, inside a div floated left if that makes any sense?

Just take a look at the source code and CSS. :)
 
Also I can see what some people mean in regards to the navigation...

I think the page name displaying when you hover it will be quite obvious though.

What could I do to get round this other than a proper navigation down the left hand side?

I could put the links to the top right of the furtherst top blue bar?
 
Phaser said:
Also I can see what some people mean in regards to the navigation...

I think the page name displaying when you hover it will be quite obvious though.

What could I do to get round this other than a proper navigation down the left hand side?

I could put the links to the top right of the furtherst top blue bar?
Click to expand...

have 2 sets of links as the navigation bar would sort the problem. have 1 like you want it for the style etc, and then one for a simple nav menu for people
 
Phaser said:
Right, i've pretty much got my design sorted.

http://dziremedia.co.uk/sites/djsniperz/4/

See the icons at the top - I am wanting it so that when users hover over them, the "navigation" text changes to the page name, eg "contact" or "audio".

How would I go about doing this? Am I right in thinking javascript is the way forward?

I have no idea and don't really know where to start.

Any help or pointers appreciated.
Click to expand...

what you are trying to do, can easily be done using javascript.

something a lone the line of:
Code: 
<a href="" onMouseover="javascript:document.getElementById('element_id').innerHTML = 'page name here!';" onMouseOut="document.getElementById('element_id').innerHTML = 'Navigation:';">Icon Here!</a>
 
Phaser said:
2 divs, one floated left, one floated right, inside a div floated left if that makes any sense?

Just take a look at the source code and CSS. :)
Click to expand...

EDIT: Ignore, thanks for the help
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom