765475 - content:url does not work with images for swapping

Status: RESOLVED WORKSFORME

(Firefox :: Untriaged, defect)

Description

[Jim Michaels]

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:14.0) Gecko/20100101 Firefox/14.0
Build ID: 20120612164001

Steps to reproduce:

tried 4 varying things with content: to swap images. this is being done on an image element.
http://Jesusnjim.com/common/img-hover-swap.html


Actual results:

nothing I have tried works.  I have tried all kinds of things beyond this.


Expected results:

the image element should be swapping images when the content:url() or content:image() or maybe content:uri() or content:attr() are used.

Comment 1

[Mardeg]

Acoording to http://www.w3.org/TR/CSS21/generate.html#content
"This property is used with the :before and :after pseudo-elements to generate content in a document."
Your example link and expected results contradict the CSS 2.1 spec.

bug 215083 is filed for CSS3 content property replacement of element (rather than pseudo-element)

Comment 2

[Mardeg]

Attachment: Image #1 for minimal testcase

Comment 3

[Mardeg]

Attachment: Image #2 for minimal testcase

Comment 4

[Mardeg]

Attachment: Image #3 for minimal testcase

Comment 5

[Mardeg]

Attachment: Minimal testcase of image swap using :hover:after

To save uploading an extra 3 images I used data: url for images on hover though a normal link to images in the CSS works fine.

Comment 6

[Mardeg]

I think the reason many people don't use the above method is because there is no control of the image display size in the pseudo-element so I had to manually resize all the images to be exactly 100x100 for this to work.

Comment 7

[Jim Michaels]

Ioriginally was going to use a percentage for the image width and height, but I was having problems with that they were not acting consistently.