@Paul O’B:
“typo” > Yes, saw the special +html .star { display:none } / ie7 hack*/
“Here it is working” > Yes!
“:after and :before support for IE6 and 7 with a simple expression” > Yes (something similar in my A/B-example).
“updated example but I think that’s a step too far” > Yes, in opposite direction.
“careful with using the button element” > True.
“if images or css are turned off” > Indeed, “it all depends how much code you want to throw at it :)”.
“btw there’s no images showing at all in IE6” > Yeah, the old lteIE6 png transparency-grey should be hacked.
“The simplest method is the sprite method” > As my conclusion: agree again.
It’s difficult to have a discussion with you, Sensei!
O, "the chances of the user having images disabled is low anyway. " > should DoubleDee go for text-only and screenreader browsers accessibility? Quite a task for the system, I guess.
Sorry I disappeared for a few days, but been dealing with a blizzard.
So here is an update…
I broke down and installed Inkscape on my MBP, and after going through a few tutorials on getting familiar with Inkscape, I was able to not only learn how to create Stars, but my first ever Sprite!!
Here is an example… (Not my final)
Using a sprite as a background-image to a Form Command Button (i.e. <input>), along with some PHP, I was able to achieve this end-effect… (Sorry I don’t have a way to show a dynamic example)
User opens up a PM and sees a Lt Gray Star
User hovers over Star and it turns to a Darker Gray Star
User see a TBD Screen-Tip (See related thread here)
User clicks on Star and it turns Red
PHP handles $_POST request
PHP updates database from “Regular” to “Important” for PM
PHP displays same PM with a Red star now in “PM View”
User sees updated TBD Screen-Tip on hover
Exactly what I was looking for!! (And another notch on Debbie’s belt!)
Javascript? No way! (don’t want your NO JAVASCRIPT shout in my ears ). CSS? Of course!
But I guess in the meantime you’ve seen the source code, which cannot lie.
I can’t see your sprite (congrats!) yet: as always … waiting for approval. Anyway, your php-method seems waterblizzard-proof.
Well, then you must have used PHP, because CSS would not handle clicking on the button and the messages and the button changing…
Yes, I looked at the source, and I just saw HTML and CSS. (I don’t know anything about JavaScript, so I thought maybe it was hiding somewhere else?)
Ha ha
Yep, so far my entire website just uses PHP, HTML and CSS. And yet it is very interactive.
For example, I built an entire messaging system with PHP and you can do things like click on columns to sort or click on a star and have things instantly update without need for JavaScript.
My code base is sooooo much simpler than those using frameworks and JavaScript and yet it will probably perform much better and be easier to maintain.
Yes, I looked at the source, and I just saw HTML and CSS (…)
Right! As far as I know, invisible hidden javascript doesn’t exist: javascript is client side, so in the source code and generated source code must be traces of javascript. Otherwise a browser can’t receive javascript.
Well, then you must have used PHP …
Wrong!
But did you see what happens at a click? On the page [U]dd-mark-[B]C[/B].htm[/U] I made a php-simulation with the simple:
<form name="form1" method="post" action="http://clba.nl/sitepoint/dd-mark-D.htm">
<div class="star" title="Mark Message">
<button type="submit" name="submit" id="submit"><span>Mark Message</span></button>
</div>
<p>Rest of the form</p>
</form>
Notice after the click the new page D in the browserbar!
In the page [U]dd-mark-[B]D[/B].htm[/U] (see other source code), I added the class=“marked”, and the link back to page C:
<form name="form1" method="post" action="http://clba.nl/sitepoint/dd-mark-C.htm">
<div class="star marked" title="Unmark Message">
<button type="submit" name="submit" id="submit"><span>Unmark Message</span></button>
</div>
<p>Rest of the form</p>
</form>
Eagerly clicking 2, 4 or 6 times to see it all happen … afterwards it looks like you’ve been in page C all the time.
So I did the same as with my page A / Page B example of [U]post #19[/U], where I explained in the Notes:
To see the “marked” state, I made a 2nd page (both pages have the same css).
In reality the submitting will go to a php-driven database I think.
The database has to toggle the title/tooltip “Mark Message”/“Unmark Message” and the span-content. Further the php-machinery has to inject or remove a class=“marked”, then the css will take care of the rest.
The easy way: I didn’t have to study php (in which I’m a noob).
