Archive for the 'XHTML' Category

Simple Image Rollover Via CSS Only

Recently asked on Yahoo! Answers:

Is it possible to create a mouse over image that doesn’t use javascript?
And if not, is it possible to create one that doesn’t use the <a> link tag? I need to insert a mouse over image into a product page but the module I’m using already defines the <a> link for the potential button/mouse over image. ??? I just need to create a no-hassle, simple mouse over image that doesn’t use the <a> tag. If I use the <a> tag, it will override the link in the module. Help!

This is fairly easy to do with CSS alone, except rather than placing your image with an IMG tag, you use a DIV tag, and set the background-image property of that DIV to be the image you want to use.

Let’s start with the DIV itself, which calls a class we will call myRollover:

To make this work, we need a base style for the myRollover class that sets the height and width of the DIV to be those of the image; I’m also going to place a black scribe around the image.

Finally, the image is set as the background image of the DIV. So long as we don’t put any text or other content inside the containing DIV, it will appear like any other image on the page. To prove that, I’m going to float this “image” to the left, wrapping text around it, and set the margin of the DIV to 10px on the right and bottom to set the text off.

div.myRollover {
	float: left;
	margin: 0 10px 10px 0;
	width: 376px;
	height: 490px;
	border: solid 1px #000;
	background-image: url(3.jpg);
}

And finally, we need a CSS class that changes the background image when we hover over the image:

div.myRollover:hover {
	background-image: url(2.jpg);
}

You can see this in action here:

http://www.dougv.com/demo/css_image_swap_mouseover/

I distribute all code under the latest version of the Creative Commons Attribution / Share-Alike License.

Good, Free Web Hosting Companies

A common question on Yahoo! Answers is where to find good, free Web hosting companies. More often than not, the request is that they also be ad-free.

I can recommend the following Web hosts because I have used them all for various purposes. Each has its limitations, but remember, you get what you pay for, even on the Internet.

A quick aside on free domain names: There are no free domain names. At least, none that are worth the aggravation. (For total n00bs, a “domain name” is like this site’s dougv.com, or yahoo.com, youtube.com, whatever.com.)

Read the rest of this entry »

Using PHP / MySQL To Store A Form Value Calculated Via JavaScript / DOM

Recently asked on Yahoo! Answers:

What PHP syntax can I use to calculate or compute fields and automatically displays the result inside a form?

without pressing anything then when it displays the result on a certain fields inside a form then pressing the submit button it will be save to mysql database…. I know already the saving but the computation syntax inside the form… how?

I’m taking this to mean that the questioner wants:

  • a user to be able to make some changes to a couple textboxes, or maybe even a radiobuttonlist;
  • automatically calculate a sum from those inputs via JavaScript /.DOM;
  • display that calculated value in a readonly textbox;
  • then insert the value of the readonly textbox into a MySQL database when the form is submitted.

Once again, what seems straightforward is a bit more complicated than you would think, but we can certainly accomplish what he is after and have it work with Internet Explorer / Mozilla browsers. Here we go!

Read the rest of this entry »

Showing Or Hiding HTML Form Elements With JavaScript

Recently asked on Yahoo! Answers:

AJAX - show an extra text field if one radio button is pressed?

I’m looking for a short AJAX script that would add an extra textfield into a form if in the radiogroup a certain button is pressed.

Example
( ) yes ( ) no < if 'no' choosen
<display a new textfield>

Before I get into answering this question, I’m going to launch into a tirade against the worst kind of Yahoo! Answers jackasses: The self-styled know-it-alls who curse darkness, rather than lighting candles.

Certain people on Yahoo! Answers can be counted upon to provide terse, arrogant, useless replies to serious questions. Most often, it’s something along the lines of, “You mean {confusing term} and it is {harangue that doesn’t answer question}. You can do this: {obscure, curt instructions}.”

Being brief when a question is succinct and appropriate is a virtue, so long as it’s obvious the person will understand your answer. It’s also perfectly fine, in my opinion, to ridicule totally moronic questions (such as, “How do I make a chat program?”, “How do I become a hacker?”, “How do I visit MySpace from school? They block it” or “How do I crack the serial number for this program?”).

But when someone (such as this questioner) makes a perfectly reasonable request, clearly demonstrates he has limited knowledge of the subject, makes it clear what he is after and what language he wants used, and even goes so far as to specifically ask for code, you’re not helping if you only say, “That isn’t AJAX, it’s JavaScript,” even if you add in some information that person clearly won’t understand.

Read the rest of this entry »

Death, Taxes And Bad Web Sites For Review On Yahoo! Answers

The old saw says the only certain things in life are death and taxes. Well, I now feel confident enough to add “requests on Yahoo! Answers to review awful Web sites.”

I’ve been participating in Yahoo! Answers for about a year now, and in that time, I’ve seen hundreds of requests from people to review their Web sites.

Without fail, they’re all God-awful. I don’t mean just ugly, or poorly executed, or incomplete, or silly; I mean, genuine affronts to aesthetics and intelligence.

Here are some examples. Brace yourself.

Read the rest of this entry »