Mobile Friendly Website

CSSPLAY

Doing it with style

image replacement COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

mrruben5:-
I've always used text-indent:-999em and overflow:hidden(opera) But IE gets a 7px bug with that.
(25.08.2005, 15:17)

Stu:-
That way will display no text with 'images off'.
(25.08.2005, 15:44)

mrruben5:-
This is what I mean:
#theimage {display:block;, width:200px; height: 150px; overflow:hidden; text-indent:-999em; bacground: utl(theimage.jpg) no-repeat top left } html: <div id="theimage">Some descrpitive text for the image here</div>
As you see you can put text there and not use an extra markup element to hide the text. How do you mean "images off"?
(26.08.2005, 22:43)

Stu:-
text-indent -999em will move the text off the visible screen.
Most browsers will allow you to browse with images turned off.
If you are using Internet Explorer then go to >tools>internet options>advanced>show pictures and click the tick to turn off images. On my example you will then see the text instead. With your example you will see nothing.
(26.08.2005, 22:58)

Jo-an:-
better use text-indent: -9999px
and use an extra <img> that holds alt text
you can hide the image with margin-left: -1000px and width: 0. The same image can be used for the background for the em. That way (if I am correct: text-based browsers will display the alt text) Plus older non-CSS browsers see the image too.
(10.09.2005, 11:38)

Stu:-
Jo-an, this one is aimed at the images-off/css-on combination which will still show the text. Any method that moves the text off screen with css will not show the text or image with this combination. Your method will also duplicate the information in text browsers and non css browsers. But thanks for the comment.
(10.09.2005, 11:59)

Jo-an:-
If you would use an extra p or a (depends you want the text is a link or not) and use text-indent: -9999px
text-decoration:none;
for <a> (maybe throw an extra overflow:hidden ??)
margin-left: -9999px
display:block
width: ??px (maybe one can do it)
for <p>
This way you can still have transparent images as backgrounds and use some text for (text-based) browsers or older browsers (but than you could use the extra img. Did some tests to see if margin-left: -9999px does any harm but cannot see any problem since it is only text that is hidden from view. In IE3 eg it displays the <img> with underneath the <p>

But can I use <p>s in <h1>s ??? They are both block-level elements not so??
(10.09.2005, 12:24)

Jo-an:-
If you would break up the text for the alt of the iamge and use the p to display some extra text. ??
(10.09.2005, 12:25)

Jo-an:-
To clarify the extra <img>, you hide the <img> for CSS capable browsers and set the same image as a background for a <span> or <em> that way you can target both ... (sorry for the repeated comments - but when you have an idea ...
(10.09.2005, 12:29)

Jo-an:-
The general idea (maybe h1 is even better)

<div id="header">

<span>
<img src="/images/mylogo.gif" width="146" height="54" alt="my webdesign company - http://www.designersprobe.com">
</span>

<p>The webdesigners that probe CSS.</p>
</div>

The CSS

#header {
height: 102px;
background: #fff url(../images/mylogo.gif) no-repeat top right;
padding: 0;
margin: 0;
}
#header p {
margin-left: -1000px;
overflow:hidden;
display: block;
width: 145px;
}

#header img {
margin-left: -1000px;
display: block;
width: 0;
}
#header span {
position: absolute;
top: 15px;
left: 41px;
width: 146px;
height: 54px;
background: url(../images/logo.gif) no-repeat;
padding:0;
margin:0;
}
(10.09.2005, 12:37)

Jo-an:-
I guess only the extra image tag that holds the alt without any further text with the same background-image on <em> or <span> could be ok for some projects.
(10.09.2005, 13:02)

Jo-an:-
the title tag (as mentioned by Dave S.) could then provide some extra info.
(10.09.2005, 13:06)

Jo-an:-
Stu, I would like to fix a tooltip with a shadow but no go in IE. What is your e-mail again since you have this site URL just fresh.
(19.09.2005, 21:25)

shi:-
I've used Stu's original method. Can anyone tell me how to link that picture to some page?
(29.09.2005, 14:38)

Stu:-
shi, I have updated the demonstration to show how you can use the image (as well as the text) as a link to another page.
(03.10.2005, 08:39)

shi:-
thx Stu... works fine...
(05.10.2005, 13:30)

Jo-an:-
@Stu: To fix the 'ability to click' I did the same just put the <em> in the <a>, why not use a span since we use background-images

One problem though, text lurking when enlarging the font-size? any ideas to stop it. When having link text that spans two lines, the text jumps under the background-image, could a z-index perhaps fix this issue?

Also adding margin:0 to the h3.ir prevents any moving of the h3 when eg enlarging font-size.
(14.11.2005, 14:42)

Stu:-
Jo-an, if you look at the text in yellow on my demo page (and my examples) you will find that the answer is to make the image have enough surrounding 'white space' to cover any text resize.
(14.11.2005, 19:41)

Jo-an:-
@Stu: got it! I add enough pixels to bottom and righthand side of my background-images.
(14.11.2005, 22:16)

Stu:-
Jo-an, as easy as that ;o)
(14.11.2005, 22:23)

Jo-an:-
#contentLinks h3 {
position:relative;
width:214px;
height:37px;
padding:0;
overflow:hidden;
margin:0;
font-size:0.99em;
}
#contentLinks h3 em
{
display:block;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-color: #7399BF; background-repeat: no-repeat;
background-position: top left;
}


Using width:100% and height:100% for em worked too, solved an issue in IE for a sliding nav
(16.11.2005, 01:34)

Stu:-
Jo-an, the only problem I can see with this is that the overflow hidden will cause the h3 text to be hidden when css is on, images are off and the text is resized larger.
(16.11.2005, 08:22)

Jo:-
@ Stu Nicholls:

Wouldn't it be great if we tried the same thing for image rollovers: hide the text under the <a href=""><em></em></a>

Problem: background on <a>s ?
(02.01.2006, 13:31)

Jo:-
Happy New Year! Stu!

your method uses position:relative for the parent element so for <a>s that is better than position:absolute
(02.01.2006, 13:45)

stuart jackson:-
stuart have problems his name e mail cant through by friends e mail from stuart jackson
(29.03.2006, 13:15)

stuart jackson:-
stu is saving the money as might on july fixing up anyway from stuart jackson
(29.03.2006, 13:18)

Horace:-
Stu, I love your site. You inspired me a lot and I'm sure one day I'll use some of your ideas. I'd like to donate when that day comes, but I'm a third-world country citizen according to PayPal, so I may have problems doing so. If you could use e-gold I wouldn't waiver a sec! :-)

But, after that preface of praise, a comment to this demonstration. Firefox uses non-linear scaling (in contrary to Opera for instance) - i.e. it resizes the TEXT ONLY. Therefore after a big zoom in, the text is visible under that CSS-styled image.

Still I got no idea yet how to improve this bit.

Take care!
(25.07.2006, 23:12)

Stu:-
Horace, all that is needed is for the image to have enough whitespace around it to cover any enlargement of the text. My image has some whitespace but obviously not enough for extreme text sizes.
(25.07.2006, 23:29)

Nik:-
This seems to suffer from a flicker when you rollover the link tho? It displays the text for a split-second on the first load of the page when you rollover. But then it's ok?
(05.09.2006, 12:27)

Oliver:-
Great work Stu. For the Image Replacement demo is it possible to invoke either an active focus or the same image replacement that you get on mouseover via tabbing?
(30.12.2006, 13:52)

JSA:-
Stu,

First of all thank God for you.

Second, I'm wondering why my nicely replaced FIR navigational images with rollover text are leaping about in Firefox:

jsalowe.com/dad/index.html

Does it have to do with default position:static, does anyone think? They jump around horribly on a:hover and a:active...and I can't suss out why.

Thanks for any advice!
(10.03.2007, 22:57)

JSA:-
Never mind, dear souls...I just moved the text to the top of the images, inserted a break and it seems to have solved itself! But thanks nonetheless--
(11.03.2007, 00:22)

Thangavel L Nathan:-
Hi Stu !
Excellent creative stu , now i came to know about the power of CSS . I Like this site very much .
(17.04.2009, 17:43)

Ryan:-
Hi Stu!

Your page is excellent. I am attempting to use your sliding list click gallery and I was wondering how you might go about making the images clickable as well?
(01.06.2010, 02:38)

Yasser Furaz Ahmed:-
Yas: Hi Stu
your css photo galleries are tremendously magnificent. But can you do photo gallery with css as if you are flipping the pages of a book.

email me: yasfur70@gmail.com

Thanks a lot.

P.S.: I am new to web design and i came across this in a flash demo.
(27.07.2013, 18:27)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page