[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 491
  • Last Modified:

Create This Shape Using CSS

Folks , here is my problem. A while back I created an application that had a number of images which the user would roll over and a red outline border would highlight this area & this was achieved using CSS. Now at that time I found through trail & error that css was (by far !) more bandwith friendly that slices & tables that I originally tried in fireworks, now this was all great as long as my areas were all squares or rectangles...

So here is the question, as I am a slow learner..please look at the attached image and tell me (preferably a small sample from you would be the beeees kneeeees) can I create the blue line using CSS ? I'm feeling I may have to go down the fireworks/photoshop route again but really would prefer to avoid this if at all possible !!

Thanks
BackOpen.jpg
0
mrmad1966
Asked:
mrmad1966
  • 2
1 Solution
 
LZ1Commented:
CSS is extremely linear and wouldn't support the angles which the rectangle resides at.  
You may however be able to do it with a combination of jquery and CSS.  However, I think that you'll find it's much easier going with the Photoshop/Fireworks option and slicing it.  
0
 
JF0Commented:
Just because you need to use an image does not mean you need to use tables. Create 2 images, one for the mouse over state, and then you can use CSS to position the image and do a mouse over effect.
0
 
remorinaCommented:
Hi mrmad1966,
Your username tells it all :)
Can you elaborate on what you're trying to achieve ?

If you only needed the blue line or a clickable area it can be done using an image map and setting a css style for that map, otherwise it's not possible using css
0
 
remorinaCommented:
And an example for you :)
mrmad1966.zip
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now