Jump to content


Photo
- - - - -

Making My Boxes Clickable


  • Please log in to reply
4 replies to this topic

#1 MoreApplesADay

MoreApplesADay

    Member

  • Members

  • 18 posts
  • Country: Country Flag

Posted 26 July 2012 - 01:01 PM

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

Please Login or Register to see this Hidden Content

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

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 July 2012 - 02:43 PM

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?

#3 MoreApplesADay

MoreApplesADay

    Member

  • Members

  • 18 posts
  • Country: Country Flag

Posted 26 July 2012 - 04:29 PM

Hey Catrina, No, I am not familiar with adding image links using HTML. Any assistance would be greatly appreciated.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 July 2012 - 04:59 PM

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:

Please Login or Register to see this Hidden Content


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:

Please Login or Register to see this Hidden Content



#5 MoreApplesADay

MoreApplesADay

    Member

  • Members

  • 18 posts
  • Country: Country Flag

Posted 26 July 2012 - 05:11 PM

Thanks Catrina!