byronwells Posted December 18, 2009 Share Posted December 18, 2009 Alright guys I am new to this forum and I really need some help please... I know this can be done in css and php but I need someone to help me... I need someone to take me step by step on how to do this Please take a look at this website: http://www.supreme-host.com/web/categories.php What I am trying to do is regarding the navigational bar.. I am trying to make it when you move the mouse over the home button it shows that is highlighted... I am using images for buttons.. So I understand that I must create other images to get it work.. But the question is I am unsure of the css code, and where to stick it... I have been struggling with this for ovewr a week.. Please can some help me Quote Link to comment Share on other sites More sharing options...
oni-kun Posted December 18, 2009 Share Posted December 18, 2009 Blah, You can do something simple like so: <img src='image.png' name="hover1" border='0' onMouseOver="document.hover1.src='image_highlight.png';" onMouseOut="document.hover1.src='image.png';" onClick='window.open("http://www.example.com");' /><br/> Basically image.png, when mouseovere'd = image_highlight.png. With onclick to go to an url.. But, You do know, this is the wrong forums and section for this question. Quote Link to comment Share on other sites More sharing options...
byronwells Posted December 18, 2009 Author Share Posted December 18, 2009 How is this the wrong forum? When I asking about a php and css issue?? This is what this forum covers... I have heard people talk about css sprites and that Quote Link to comment Share on other sites More sharing options...
japesu Posted December 18, 2009 Share Posted December 18, 2009 What you are looking for is styling links with css. So visit http://www.w3schools.com/Css/css_link.asp for starters. Basically you will need to specify a different background-image to your link in normal and in hover. Of course some other styling too like height and width etc. Quote Link to comment Share on other sites More sharing options...
byronwells Posted December 18, 2009 Author Share Posted December 18, 2009 japesu I need a little bit more information/help than that please :) I am very slow at this... But when I do get it then I do get it lol Quote Link to comment Share on other sites More sharing options...
oni-kun Posted December 18, 2009 Share Posted December 18, 2009 japesu I need a little bit more information/help than that please :) I am very slow at this... But when I do get it then I do get it lol I gave you a working example. And this has absolutely nothing to do with PHP, PHP is a serverside language, it doesn't even have styling. If you "see" someone jump off a bridge, should you? Quote Link to comment Share on other sites More sharing options...
byronwells Posted December 18, 2009 Author Share Posted December 18, 2009 oni-kun I am using css file linked to a php file.. I have create a lot of styling via that way using different classes for the php file to read. So yes php is a server based, but you can still create styles in it.. You have show me the very old way.. I would like to be able to create a div class for it, etc. Quote Link to comment Share on other sites More sharing options...
steveboj Posted December 18, 2009 Share Posted December 18, 2009 oni-kun I am using css file linked to a php file.. I have create a lot of styling via that way using different classes for the php file to read. So yes php is a server based, but you can still create styles in it.. You have show me the very old way.. I would like to be able to create a div class for it, etc. You really need to stop and take a few moments to make sure you understand what oni-kun has been kind enough to tell you. It simply isn't possible to style using PHP or create image rollovers using PHP. So you have posted in the wrong forum and you need to look into CSS and Javascript. Quote Link to comment Share on other sites More sharing options...
lAZLf Posted December 18, 2009 Share Posted December 18, 2009 Like Japesu said, in CSS use the .yourclasshere { background-image: normalbg.jpg; } .yourclasshere:hover { background-image: glowbg.jpg; } I don't recommend using java script, it makes it in a sense more complicated when it doesn't have to be, and someone can easily turn off javascript on their browser. Like everyone said. This is not PHP. Quote Link to comment Share on other sites More sharing options...
steveboj Posted December 18, 2009 Share Posted December 18, 2009 There are pros and cons to all the different rollover methods depending on the code your working with. Your next issue will be to find a suitable way to pre-load the hover image so it displays immediately when the user hovers over the button. Quote Link to comment Share on other sites More sharing options...
emopoops Posted December 18, 2009 Share Posted December 18, 2009 i read pleasure in your post and i find u quite irational!. thank you for this. ive been trying to rework this sincre 1999. im really ghoing to be following this thread till it reaches touchdown, literally. Quote Link to comment Share on other sites More sharing options...
oni-kun Posted December 18, 2009 Share Posted December 18, 2009 i read pleasure in your post and i find u quite irational!. thank you for this. ive been trying to rework this sincre 1999. im really ghoing to be following this thread till it reaches touchdown, literally. Do none of your posts have relevant content? Quote Link to comment Share on other sites More sharing options...
emopoops Posted December 18, 2009 Share Posted December 18, 2009 im watching this@you Quote Link to comment Share on other sites More sharing options...
mrMarcus Posted December 18, 2009 Share Posted December 18, 2009 im watching this@you that's kinda creepy. this is a simple image preloader with CSS: ... <head> <style type="text/css"> .preload { display: none; } </style> </head> ... <img src="your_image_to_be_preloaded.gif" class="preload" /> </body> or using the images as backgrounds: <style type="text/css"> .nav { background: url(your_image_to_be_preloaded.gif) no-repeat; margin-left: -1000px; } </style> either would work .. i would go with the latter for a navigation setup. and the first for just a simple preload. Quote Link to comment Share on other sites More sharing options...
emopoops Posted December 18, 2009 Share Posted December 18, 2009 good work i might add that im really getting on to thsi kind of thing. ia lmost got my script worked out right here in my trusty punchy ntooepad thanks for the tips guys! realy. your the thanks!@YOU Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.