Making a <div display the equivalent of <img's alt=

[Curtis]

We're in the final stages of writing a markup language. We
included a macro feature, which also turned out to be a
handy way to style elements like paragraphs and such.

In the PHP code we have a <p ... style=\"==para==\"

If we wish to style a particular paragraph, we just define a
macro:

..==para==width: 50%; padding: 10px; color: navy;

and so forth. It applies to all paragraphs until we clear
it:

..==para==

whereupon the subsequent paragraphs are styled by the
default CSS file. This is for advanced users, and CSS syntax
is about as clean as they come, so why not?

So here's the problem: today we're finishing the code for
links, images, etc. Images are a big deal for this
application, and **one vital feature is the mouseover ALT
text.**

We have it in the <IMG ... ALT="Witty description" of
course.

If we embed a macro into here, though, like <IMG ...
ALT="Witty description" ==img== we're forced to use a syntax
different from CSS, equals symbols instead of colons, for
example.

This mixed syntax is undersirable from a user perspective.

We can display an image in a <div, which would permit us to
use CSS syntax to manipulate, but is there any
non-Javascript way to get a mouseover ALT message?

If not, or if displaying images with <div and CSS is
cross-browser flakey upon closer scrutiny, we're prepared to
just translate CSS-style text for the image into the HTML
<img syntax and go with the <img tag.

Feedback and suggestions most definitely appreciated.

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.

 

[Curtis]

We can display an image in a <div, which would permit us
to

use CSS syntax to manipulate, but is there any
non-Javascript way to get a mouseover ALT message?

Found an answer--hope it works well on all browsers: <div
title="This little piggie..."

Seems to do the trick.

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.

 

[Mark Simon]

Could you give an example of what you thing the img syntax would look
like? And can you give a more complete example of what the coding would
look like?

You shouldn't use the alt attribute of an image this way. Although IE
will display the contents this way (Mozilla does not), the real purpose
for the alt text is as a substute for the image if, for some reason, it
cannot be shown. If you use the title attribute, all browsers will
render it the way you intended, and you will be making better use of the
attributes.

This doesn't solve your div problem. If your html is properly marked up
(as in xhtml), you could use xslt to extract any attribute information
you like.

Regards,

Mark

We're in the final stages of writing a markup language. We
included a macro feature, which also turned out to be a
handy way to style elements like paragraphs and such.

In the PHP code we have a <p ... style=\"==para==\"

If we wish to style a particular paragraph, we just define a
macro:

.==para==width: 50%; padding: 10px; color: navy;

and so forth. It applies to all paragraphs until we clear
it:

.==para==

whereupon the subsequent paragraphs are styled by the
default CSS file. This is for advanced users, and CSS syntax
is about as clean as they come, so why not?

So here's the problem: today we're finishing the code for
links, images, etc. Images are a big deal for this
application, and **one vital feature is the mouseover ALT
text.**

We have it in the <IMG ... ALT="Witty description" of
course.

If we embed a macro into here, though, like <IMG ...
ALT="Witty description" ==img== we're forced to use a syntax
different from CSS, equals symbols instead of colons, for
example.

This mixed syntax is undersirable from a user perspective.

We can display an image in a <div, which would permit us to
use CSS syntax to manipulate, but is there any
non-Javascript way to get a mouseover ALT message?

If not, or if displaying images with <div and CSS is
cross-browser flakey upon closer scrutiny, we're prepared to
just translate CSS-style text for the image into the HTML
<img syntax and go with the <img tag.

Feedback and suggestions most definitely appreciated.

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.

--
<hr />
<p><strong>Mark Simon</strong><br />
Comparity Net<br />
Computer Training &amp; Support</p>
<p>Phone/Fax: 1300 726 000<br />
mobile: 0411 246 672</p>
<p>email: <a href="mailto:[email protected]">[email protected]</a><br />
web: <a href="http://www.comparity.net">http://www.comparity.net</a></p>
<p>Resume: <a href="http://mark.manngo.net">mark.manngo.net</a><br />
Calendar: <a
href="http://www.comparity.net/calendar.php">http://www.comparity.net/calendar.php</a></p>

<br>
<hr />

 

[Curtis]

Could you give an example of what you thing the img syntax would look
like? And can you give a more complete example of what the coding would
look like?

The samples of image <img syntax I encountered used =s and
quote marks, which would be different from the CSS we're
allowing advanced users to feed elements like paragraphs,
etc.

We didn't want to mix the two styles, as CSS uses : and
generally requires no quotes, so far as I can tell (not sure
about that URL(... thing, though.)

You shouldn't use the alt attribute of an image this way. Although IE
will display the contents this way (Mozilla does not), the real purpose
for the alt text is as a substute for the image if, for some reason, it
cannot be shown. If you use the title attribute, all browsers will
render it the way you intended, and you will be making better use of the
attributes.

Thanks for the feedback on this. I've discovered the title
attribute for <div in the last hour or so, and that seems to
work dandy.

We've been able to make the <div setup do everything we need
in our very fresh experiments so far, to behave like the
<img, with the exception of autosizing.

Anyone know of a way to make a div autosize to its
background image? I realize that slows things down with the
<img tag, that specifying size is the better route for
stable-looking page load speed, but it would be nice to have
the option.

This doesn't solve your div problem. If your html is properly marked up
(as in xhtml), you could use xslt to extract any attribute information
you like.

Regards,

Mark

Well, now you went and lost me. Not hard to do, since I
don't know what xslt is. I'll have a Google for it, but for
now we're happy just to make this thing basically
functional--we'll standardize the output to some
specification on a later refactor of the code.

Thanks,

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.

 

[Mark Simon]

I see you've found a solution, so if it does the job then it does the job.

Anyone know of a way to make a div autosize to its
background image? I realize that slows things down with the
<img tag, that specifying size is the better route for
stable-looking page load speed, but it would be nice to have
the option.

I don't think you can without javascript (it's a trivial exercise in
Javascript). However, you really should use the width & height
attributes for the img tag, since that helps the browser to optimise
rendering the page. With information, you might as well as apply it (via
css) to the div.

Well, now you went and lost me. Not hard to do, since I
don't know what xslt is. I'll have a Google for it, but for
now we're happy just to make this thing basically
functional--we'll standardize the output to some
specification on a later refactor of the code.

XML is a generalised markup language capable of marking up all sorts of
things. HTML has been re-formulated as a dialect of XML and the result
is known as XHTML.

XHTML is somewhat fussier than HTML (all tags must be in lower case, all
tags must be closed properly, even empty tags, etc), but otherwise
virtually identical. Browsers that render HTML (all of them) will
happily render XHTML, which is easier to interpret since they don't have
to bother with interpreting variations.

Any XML can be translated to any other XML using XSLT. XSLT Since XHTML
is also just a flavour of XML, it too can be translated to any other
XHTML. You can use this fact to, say, take some existing XHTML and
re-write it into more XHTML. For example, you could simply take your
images and wrap them inside divs with similar attributes.

This is assuming that your HTML completely follows XML structure, which
is what XHTML does.

Mark

 

[Curtis]

I see you've found a solution, so if it does the job then it does the job.


I don't think you can without javascript (it's a trivial exercise in
Javascript). However, you really should use the width & height
attributes for the img tag, since that helps the browser to optimise
rendering the page. With information, you might as well as apply it (via
css) to the div.

That would put it out-of-bounds. We're committed to
Javascript-free code.

XML is a generalised markup language capable of marking up all sorts of
things. HTML has been re-formulated as a dialect of XML and the result
is known as XHTML.

XHTML is somewhat fussier than HTML (all tags must be in lower case, all
tags must be closed properly, even empty tags, etc), but otherwise
virtually identical. Browsers that render HTML (all of them) will
happily render XHTML, which is easier to interpret since they don't have
to bother with interpreting variations.

Any XML can be translated to any other XML using XSLT. XSLT Since XHTML
is also just a flavour of XML, it too can be translated to any other
XHTML. You can use this fact to, say, take some existing XHTML and
re-write it into more XHTML. For example, you could simply take your
images and wrap them inside divs with similar attributes.

This is assuming that your HTML completely follows XML structure, which
is what XHTML does.

XSLT was the term I'm unfamiliar with. We'll have a look at
these issues before too long. Thanks, Mark.
--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.

 

[Jukka K. Korpela]

We're in the final stages of writing a markup language.

Really? Why? It's difficult to see what you are really trying to accomplish.
It sounds you have some sort of preprocessing that generates HTML. Well,
that's fine, as long as you produce HTML that is both syntactically and
semanttically correct.

In the PHP code we have a <p ... style=\"==para==\"

.==para==width: 50%; padding: 10px; color: navy;

Your CSS is far from exemplary. Setting padding in pixels (instead of the em
unit) and setting color without setting background, as well as making non-
link text some variant of blue, are typical symptoms of having missed the
essentials of CSS.

So here's the problem: today we're finishing the code for
links, images, etc. Images are a big deal for this
application, and **one vital feature is the mouseover ALT
text.**

Then the design is all wrong. If mouseover events are vital, the page is
broken by design. To begin with, there might be no mouse, or the user might
be physically unable to move it around with sufficient accuracy.

We have it in the <IMG ... ALT="Witty description" of
course.

Again broken by design. The ALT attribute shall specify the text to be
presented when the image is not presented. It specifies the textual
ALTernative.

Feedback and suggestions most definitely appreciated.

Backtrack to the point where you started thinking you will use mouseover
texts for something vital. Then take another path.

 

[Curtis]

Really? Why? It's difficult to see what you are really

trying to accomplish.

About what any other markup language accomplishes. The
difference is one of style and some features.

It sounds you have some sort of preprocessing that generates HTML. Well,
that's fine, as long as you produce HTML that is both syntactically and
semanttically correct.

That is, of course, the goal. We're getting the app to work
first, then we'll clean up the output.

Poor idea. Generate <p class="funny"> instead, and use an external style
sheet with p.funny { ... }.

Perhaps I was unclear. We're using this ==macro== syntax to
override, in the case of particular elements, a standard
styling sheet. The adminstrators would have access to the
styling sheet, but not all users would. We're just passing
through to the end user the power of CSS, but in a limited
and item-specific way.

FYI, it works great!

Your CSS is far from exemplary.

That doesn't surprise me. Nor is it of great importance to
me at this point. In the context of this thread, I only need
suggestions for how to make CSS work right to display images
and some mouseover text.

Setting padding in pixels (instead of the em
unit) and setting color without setting background, as well as making non-
link text some variant of blue, are typical symptoms of having missed the
essentials of CSS.

The point was to illustrate use of macros. Users can use CSS
however they please--we're simply passing it through to the
elements.

Then the design is all wrong. If mouseover events are vital, the page is
broken by design. To begin with, there might be no mouse, or the user might
be physically unable to move it around with sufficient

accuracy.

The objective was popup text, by whatever means. We use it
on our website with full knowledge that not everyone will be
able to see it.

Again broken by design. The ALT attribute shall specify the text to be
presented when the image is not presented. It specifies the textual
ALTernative.

Another poster has made the point that title= is the
preferred attribute.

Backtrack to the point where you started thinking you will use mouseover
texts for something vital. Then take another path.

The vital thing is that whatever we use for image setting
present popup text to most browsers. Our *application* is
far from vital--in fact it is quite whimsical. We use it for
normally-invisible humorous captions, which users can
explore or not as they wish. Perhaps I should have said it's
"relatively absolutely necessary." Heh.

I appreciate your concern, though. Thanks for the comments!

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.