1

I want to make a certain image when the mouse comes on it it changes to another image; this is easy with css by making a link, and this link acts as the part at which the images change, no problem when making square hover.

But I want to make a hover on a diagonal image, how do I do this?

For Example this image :- When the mouse hover on Link 1 the image turns to a white image and for example.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
DarkProfessor
  • 79
  • 8
  • Diagonal stuff, afaik, does not exist in a DOM. You should use flash for this... – MarioDS Apr 06 '13 at 20:25
  • 2
    Flash is *never* the answer. People suggesting otherwise is why I'm *still* forced to have a constantly updating and constantly crashing flash plugin/driver on my PC – Nick Cardoso Apr 06 '13 at 20:27
  • 1
    if you want to work with custom shapes, then SVG is a great option (but its not supported on older IE versions) – trajce Apr 06 '13 at 20:27
  • i thought of using the scalable vector graphics but as you said it is not supported on IE :( – DarkProfessor Apr 06 '13 at 20:43
  • How about image maps? And then check this [stackoverflow link](http://stackoverflow.com/questions/745110/using-jquery-hover-with-html-image-map) for the hovering – trajce Apr 06 '13 at 20:47

1 Answers1

0

The simplest way is with well positioned images (overlays) with transparent areas, if you don't want to use images the only way I can think of is to use the border hack to create the triangles/diagonals. If you choose the latter look on Stu Nicholls' site - www.cssplay.com, that's where I learnt it many years ago - but beware it's fairly advanced as CSS goes

Explanation as requested:

Because diagonals aren't supported using diagonal images slanting left to right (/ / / /) would mean that the images don't appear together as you want rather the the bottom-left of one slant would be in line with the top-right of the previous slant as opposed to bottom-right where you want it

You fix that by using z-index to overlap them and either relative or absolute positioning:

.img1 { width: 100px; position: relative; z-index: 1; }
.img2 { width: 100px; position: relative; left: -100px; z-index: 2; }
.img3 { width: 100px; position: relative; left: -200px; z-index: 3; }
.img4 { width: 100px; position: relative; left: -300px; z-index: 4; }

each image further along will have a bigger gap to move by, the exact distance will depend on size of image and angle of slant. Bare in mind you will actually want to move the wrapping a rather than the image itself otherwise the area you can click wont be over the image

Nick Cardoso
  • 20,807
  • 14
  • 73
  • 124
  • would you explain more the first way you talked about because actually i want to use images ,, – DarkProfessor Apr 06 '13 at 20:31
  • mm, doesn't this will make gaps between images?? – DarkProfessor Apr 06 '13 at 20:50
  • No, that's exactly what the example is explaining. – Nick Cardoso Apr 06 '13 at 20:51
  • sry another question i use links on one image and change the background position of the link instead of using many images and many other for the hover how will this affect the code you gave me ?? – DarkProfessor Apr 06 '13 at 21:00
  • 1
    You are talking about a sprite, it wont change what I gave you, you'll simply add background-position to each class. You can google that yourself, there's loads of tutorials and if I give you all the code you won't get to understand how it works. – Nick Cardoso Apr 06 '13 at 21:10