Someone want to make me a rollover?

[bigmaddaz]

Right basically, if I send someone a .PSD (photoshop file) could they make a rollover for me? Ive got all the layers there, I did it in adobe image ready with rollover states but then that creates a load of javascript language which I dont want. Anyone wanna be my new best friend and help me out? should only maybe take 10 mins for a pro!

Cheers in advance

Daz

 

[Saundo]

Yu wont be doing any roll overs without Javascript or CSS. Nothing wrong with using Javascript as long as it downgrades graicefully.

 

[bigmaddaz]

So you wreckon its suitable on a website if I create a rollover using adobe image ready? and use the javascript it creates?

 

[Daz]

CSS is the best way to do a rollover.. I wouldn't use any other method really.

 

[bigmaddaz]

Lol, I did about 5 threads on here before and was googling and learning tutorials for ages but could never master the CSS rollover tutorials!

 

[bigmaddaz]

The site looks like this when loaded:

http://www.cliosport.net/forum/attachment.php?attachmentid=25151&stc=1&d=1199026908
websiteoff.jpg

Then when they rollover one of the coloured rectangles a it reveals what each one is

http://www.cliosport.net/forum/attachment.php?attachmentid=25152&stc=1&d=1199026908
websiteover.jpg

...Well what I mean is, thats what I want to happen !

 

[Adams_16v]

CSS is definitely the best way!

i always do it that way with NO loading (I see loads of css rollovers that you have to wait 3 seconds for the image to load after)

This is one of my websites:

www.i-modish.co.uk (links at the top)

 

[bigmaddaz]

got that site in my bookmarks, was well impressed when you showed me it before!

 

[bigmaddaz]

oh and I still cant see where the rollover code is in the page source?! :S

 

[Adams_16v]

here ya go matey, ill give you a hand. Try replicating that and see how it turns out.

HTML:

<!--MAIN NAVIGATION START-->
       <div id="mainnav">
       <div id="nav_home" class="cssnav"><a href="/index.php" title="Homepage"><img src="/skins/imodish/styleImages/buttons/home.gif" alt="homepage" /></a></div>
       <div id="nav_aboutus" class="cssnav"><a href="/about-us/info_1.html" title="About us"><img src="/skins/imodish/styleImages/buttons/aboutus.gif" alt="about us" /></a></div>
       <div id="nav_contactus" class="cssnav"><a href="/index.php?act=contactform" title="Contact us"> <img src="/skins/imodish/styleImages/buttons/contact.gif" alt="Contact us" /> </a></div>        
       </div><!--mainnav-->
<!--MAIN NAVIGATION END-->

CSS:

/* TOP NAVIGATION BUTTONS */

#mainnav {
    position: absolute;
    top: 12px;
    left: 310px;
    height:35px;    
    width: 210px;
    }

.cssnav    {
    position:relative;
    float: left;
    margin: 0; 
    padding: 0;
    width: 70px;
    height: 35px;
    overflow:hidden;/* for ie to hide extra height*/    
    }        

.cssnav a {
    display: block;
    width: 70px;
    height: 35px;
    float: left; 
    overflow:hidden;/* for ie to hide extra height*/
    }

#nav_home {background: url(../styleImages/buttons/home_b.gif) no-repeat;}
#nav_aboutus {background: url(../styleImages/buttons/aboutus_b.gif) no-repeat;}
#nav_contactus {background: url(../styleImages/buttons/contact_b.gif) no-repeat;}

.cssnav a:hover {
    color: #ffffff;
    }
        
.cssnav img {width: 70px; height: 35px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}

.cssnav span {
    position: absolute;
    left: 30px;top: 15px;
    text-align: center;
    width: 150px;
    cursor: pointer;   
    }

/* END OF NAVIGATION */

 

[bigmaddaz]

Does this load ok for everyone? the links arent meant to work I just want to know if the rollover works ok:

http://www.aoqo38.dsl.pipex.com/myweb/index.html

 

[Adams_16v]

works fine for me!

 

[bigmaddaz]

you using firefox mate? I tried in iexplore, and a box comes up at top where you have to click allow java applets, which is just gonna annoy anyone using iexplore.

 

[Adams_16v]

no problems in firefox or IE6 for me matey!