Been messing around with web design and css now for a few years. In that time I have encountered many problems and issues. The fixes are often ill thought out and may apply to one browser or even one version of one browser but not another.

The the issue of rollover images as a beaming example. On this web page, I have a navigation bar above, when you place the mouse over any button, you notice the background changing colour. That is typically done by loading a different image during the mouse over event using css. The problem here is that there is no browser call to the second image until the user actually places the mouse pointer onto a navbar button. Only then is the second rollover image called by the browser and until it initially loads, the user experiences a slight delay that gives the appearance of sluggishness or a non responsive web site layout. The fix for this is to use some method to pre-load the rollover image when the page loads so that it is there, in memory, ready to respond immediately to a user mouse over event.
There are loads of ways of achieving this pre-load but they all have their advantages and disadvantages. The most common way is to use javascript. But what if the user has javascript disabled on their browser ?

You can use css but the traditional methods are ugly. For example, a common css method is to create a div, set it’s position to some huge minus figure and load the rollover image as it’s foreground or background or some href attribute or what have you. The fact that the div has a location of -1000px / 1000px hides it (hopefully) from the user. This is the sort of thing that programmers (at least honest to decent programmers) absolutely hate. Ahh the never ending search for the ‘elegant’ solution.

Here’s my solution to this age old problem

Instead of using 2 or even three images for the navigation bar, use just one! Bolt the images together into one long image and then simply use css to change the position of the image when the relevant mouse over, visited or what have you effect is required. In the bad old days, my menu above would have had 2 images as follows.

navlink.png	navhover.png

and my css would have looked something like this

#nav a, #nav a:visited {
    background-image: url(‘images/navlink.png’) 
    . . . . .
    }

#nav a:hover {
    background-image: url(‘images/navhover.png’) 
    . . . .
    }

Now lets consider amalgamating the images into one. What about the following image.

navlink_hover.png

Here, I have joined the two images into one larger image. This image gets loaded with my web page, and when I want to implement the mouse over (hover) effect, I simply use css to change the position of this image in the div or whatever container it happens to reside in. The following css does this beautifully.

#nav a, #nav a:visited {
    background-image: url(‘images/navlink_hover.png’) right;
    . . . . .
    }

#nav a:hover {
    background-position: 600px;
    . . . . .
    }

In the first style, I use “background-image: url(…) right; To right align the image in its container. Then in the hover style, I move the image 600px (the width of one transition within the image or half the image width). The effect to the user is to have instant responsive rollover effects making the site look and feel professional or at least somewhat decent. You could also have a 3 part image and move / offset it an appropriate distance for each of the styles a, hover and visited.

I got my exam results on 25th June and was happy with a first class honours. So I now have a BSc (Hons) in Computing. Four or five years ago when I was considering going back into education, I made a promise to myself that if it worked out well and if I did well enough, then I would strive to achieve a Masters in my chosen field. So now that I have graduated from IT Sligo, I have been humming and hawing about what I should do. I had been talking to IT departments in Uni’s around Ireland all year looking for a course or research opportunity that suited.

I finally found a 2 year taught/research Masters in NUIG. The MSc in Information Technology (M.I.T) seems right up my street. I liked the brochure so much that I went to NUIG and met with Pat Byrne there. She was so kind and helpful and gave me great insight into this course and life as a 4th level student in general. So I have completed my PAC application (albeit late) for this course. I still have not set this in stone but I need to start making some kind of decision on my future. Completing this application gives me a focus. I have to admit though that I kinda have my heart set on this so it’s probably going to happen.

After the catastrophe of my site being deleted, I am slowly but surely getting stuff back online. Today I decided to tackle the Photo gallery. It’s powered by a script called gallery2 available here and it stores it’s data in a MySql back end. So luckily I had a backup of the gallery and a MySql  data export script.

The problems arise when you try to import a large script file into MySql over a web interface. Usually you run into a time out or a memory overload error as dictated by the hosts php settings in php.ini. After much searching though, I came across a fantastic script called BigDump.

BigDump carries out staggered import of large and very large MySQL Dumps (like phpMyAdmin 2.x Dumps) even through the web servers with hard runtime limit and those in safe mode. The script executes only a small part of the huge dump and restarts itself. The next session starts where the last was stopped. It also presents a reasonable representation of a status GUI letting the user know the current progress of a data import.

Using the script is very easy.

1. Open BigDump in a text editor and adjust the database configuration
2. Drop the old tables on the target database if your dump doesn’t contain “DROP TABLE” (use phpMyAdmin)
3. Create the working directory (e.g. dump) on your web-server
4. If you want to upload the dump files directly from the web-browser give the scripts writing permissions on the working directory (e.g. make chmod 777 on a Linux based system). You can upload the dump files from the browser up to the size limit set by the current PHP configuration of the web-server. Alternatively you can upload any files via FTP.
5. Upload bigdump.php and the dump files (*.sql or *.gz) via FTP to the working directory (take care of TEXT mode upload for bigdump.php and dump.sql but BINARY mode for dump.gz if uploading from MS Windows).
6. Run the bigdump.php from your browser via URL like http://www.yourdomain.com/dump/bigdump.php . Now you can select the file to be imported from the listing of your working directory.
7. BigDump will start every next import session automatically if you enable the JavaScript in your browser.
8. Relax and wait for the script to finish. Do not close the browser window!
9. IMPORTANT: Remove bigdump.php and your dump files from your server

Running the script initially, presents this screen where a user can upload a sql import file or select an existing file to import into MySql.

The import progress page. Once you run the script, this page is displayed, it updates every few minutes. Give it plenty of time.