dougv.com | The Web home of Doug Vanderweide

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:

<div lang="myRollover"></div>

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:

9
10
11

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 code under the GNU GPL version 3.

Recently asked on Yahoo! Answers:

Paginate in php: 3 items on front page-then 1 item on next pages?

I know how to paginate mysql results, but have only been able to have the same number of results appear on page 1 and the remainder of the clicked pages. However, I want to have a different set of results on the first page, and then on pages 2 and up, I want a different number of results. For example, on page 1, I want 3 results, then on pages 2 and up, just one result. Thanks.

I’ve covered this several times before, but never as a seperate topic, and it’s often asked: How do you paginate a PHP recordset?

It’s fairly simple, using mysql_data_seek() and a few checks to ensure our variable stays in range. We begin by assuming you will use one page to display your recordset, and will keep passing a page number parameter via querystring to that page, like this:

http://www.mysite.com/records.php?page=1

If you want to move to the second page of records, the url would be:

http://www.mysite.com/records.php?page=2

And so on. Let’s begin with the basics of PHP results set pagination; after that, the specific request.

Continue reading ‘Variable PHP Recordset / Results Set Pagination’ »