Jump to content
Sign in to follow this  
MoreApplesADay

Making My Boxes Clickable

Recommended Posts

MoreApplesADay    0
MoreApplesADay

Hey, I am trying to get my boxes configured in a way similar to the ones on Apple. I would like to have the entire box be clickable and for it to change colors when hovered over. Can you help me? My website is http://moreapplesaday.com/ Here is the custom css I used to make the boxes: body{} .box-media-pad{ padding: 10px; #gradient > .vertical(@white, #f5f5f5); border: 2px solid #ddd; .border-radius (3px); .box-shadow(inset 1px 1px 0 @white); } I am a noob/beginner in web design and am wondering what I need to do in order to make them clickable with a color change while hovering. Best, -Pete


Peter @ MoreApplesADay

LIVE Longer We Will!

Share this post


Link to post
Share on other sites
catrina    103
catrina
I looked into ways to make DIV layers (which are what the boxes are) clickable, but I found no solid solution that can be implemented. It'll be easier to make the entire box clickable by creating images you can insert into each box. These images can be linked and add to the boxes using HTML. On the Apple page, those boxes are actually images, so you'd be accomplishing exactly what they did, anyway. Are you familiar with adding image links using HTML?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
MoreApplesADay    0
MoreApplesADay
Hey Catrina, No, I am not familiar with adding image links using HTML. Any assistance would be greatly appreciated.

Peter @ MoreApplesADay

LIVE Longer We Will!

Share this post


Link to post
Share on other sites
catrina    103
catrina
Okay, you'll need to create the images first (with the text, graphic, etc.). You'll need an image editing program to do this. Once you've created these images, you can upload them to your Media Library. To insert an image into a box using HTML, you can add this code: [code][/code] LINK = The full link you want the box to link to DIRECTIMAGEURL = The full image URL for the image you want to use for that box (this image URL can be copied and pasted from the Media Library when you view the image's details there) For a working example, please see here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_imglink

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
MoreApplesADay    0
MoreApplesADay
Thanks Catrina!

Peter @ MoreApplesADay

LIVE Longer We Will!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×