Deep Sarcasm

The old urge has been acting up again - I want to tweak my blog design. I know, I said that this design will stick for at least a year - and I’m planning to stand by that statement. It’s just that some elements of this design don’t complement some others as well as they could, so I will be making small almost unnoticeable tweaks. For example, I bet you haven’t noticed the slightly different colors assigned to comments lately.

With that public service announcement out of the way, I am left with little to write and much to rant about. The first thing I have a bone to pick with is software installers - you know, those exe files which hide tonnes of stuff in themselves somehow. Sometimes, when I run one of these, it asks me to choose one of two options: “typical” and “custom”. The custom mode, as they imply, is for “advanced” users. I say this is a false claim, because a) the only extra option you get is where you want to install stuff and b) I think amateur users would also like to have a choice in the matter.

It doesn’t end there, though. When I try to install a patch for my already installed software, there is no such option - it gives me the ability to change the install location by default. However, it already knows where the software is installed, it’s just giving me the option to change the patch location so I can screw myself over. Why? Can it not just go ahead and install the patch where the damn software is?

Then there’s the EULA, the huge chunk of lawyer-talk that I doubt anybody ever reads. This could be a problem though, who knows they might stick a line in there that binds you to slave for the software company forever. In any case, the whole thing can be skipped in a second and most people don’t even read their insurance papers carefully, so this is really not too much of a pain.

What I really hate, though, is the fact that most installers need your permission to finish installing. When all is said and done, they will just sit there, flashing a big “Finish” button in your face. A finish button, on a page that says “Setup has finished installing <Software> on your computer” - why would I tell you to finish, when you’re telling me that you have finished? I believe this is just their way of making you feel retarded.

I was planning on writing this one quite a while ago, but I got a little busy and it slipped my mind. Sorry about that! Well, here it is at last, the tutorial that will show you how to display the summary of an image when it is hovered over - for example, the website thumbnails in the link gallery.

Getting Started

Before doing anything else, you must first decide on a fixed size for your image, or images. All subsequent images that need a hover description using the same CSS should have the same size as the first one, because we will be basing our measurements off of it.

For this tutorial, I will be using the scaled down image of a cloudy sky from stock.xchng, the free stock photo resource. This is what the original image looks like when resized to 300×200 pixels:

The Original Image

Preparing The HTML

The thing with CSS is that when using it for styling, there has to be something to apply the style to. Assuming all your images are not the same size and you want this effect on only a select few, we will enclose the image - along with the summary - in nested div elements.

Here is what my code looks like, and what yours should resemble:

<div class="imageshell">
<a href="your-url-here"><span>
<img width="300" height="200" alt="Cloudy Sky"
src="wp-content/uploads/2008/08/tut_cloudimg.jpg" />
<div>
This is a caption for this image, which depicts white clouds
against a beautiful blue sky. This space, besides containing text,
can also house other media - you can even treat it like a small
individual web page (within limits, of course).
</div>
</span></a>
</div>

Styling It With CSS

Okay, here’s the part you’ve been waiting for - here’s where the fun of making it work begins. Now before you pull out your stylesheet, I need to remind you that this code is based off the size of the image you are using, and you may have to modify it to suit your needs. With that out of the way, here’s the magic recipe:

.imageshell{
width:300px;
height:200px;
text-align:left;
}
.imageshell a:hover div {
color:#333333;
display:block;
}
.imageshell div {
background-color:#F3EBCC;
display:none;
width:290px;
height:190px;
position:relative;
padding:5px;
left:0px;
top:-200px;
}You will notice that the size of the inner div is smaller than the image by 10px each on height and width (or 5px on each side) - this allows the padding to expand it to fill the image. Of course, you are free to modify any part of the code as you please, for example changing colors, sizes and padding. Some modifications may break it, but that depends on what you are trying to do.

Note: The most probable thing you will need to tweak is the top and left attributes in the style for the inner div. This is because it depends on the default border and padding settings on your image from the pre-existing CSS.

The Final Product

Here’s the final product (achieved slightly differently than how it is explained above - I have not used an external stylesheet and have instead declared the styles in a standards defying manner for my convenience), yours will of course be different. Well, hopefully. Leave a comment if you have any issues.

This is a caption for this image, which depicts white clouds against a beautiful blue sky. This space, besides containing text, can also house other media - you can even treat it like a small individual web page (within limits, of course).

Clicking on this particular image will take you to the top of the page.

Last night, I was watching this interesting semi-action flick with supernatural elements. Halfway through, something went wrong somewhere and the telly decided that it was time to kick the proverbial bucket. As a result, I was unable to finish watching this movie. As for whether that is or was relevant to this post or not, that’s TBD.

Nevertheless, on to the topic for today: pirates versus ninjas. It is well known that pirates still exist - why, the RIAA is blowing it’s top over the matter as I type - and so do beings who practice ninjutsu. While neither of them fit in with hollywood stereotypes, those are the clans I will be considering in a hypothetical clash. As one team does not employ conventional weapons, or indeed any weapons that cause direct physical harm, this cannot be called a conventional fight from any perspective.

First, let’s take a look at the modern day pirate: sailing the ocean of cyberspace in search of software-y treasure, these wary seamen don’t let a single file remain in the commercial domain. They will board your vessel when you least expect it, make away with your precious cargo, and - worst of all - spread it out among the masses in a very irritating robin-hoody manner. Who will buy what they can have fer free, eh lad? All is not lost, however, unless you happen to be the one trying to sell off your music/movies/programs. I mean, hey! Free files!

Then there’s the modern day ninja - well, technically they’re not ninjas, for a ninja is an elite warrior, highly trained in all aspects of martial arts combat, who specializes in unconventional warfare. That link, by the way, is boring (you’ve been warned). The modern day ninja is little more than a martial arts student who occasionally displays his skill in a non-violent waving of weapons, or if you’re lucky, a mock sparring session. Yes, it is kind of pitiful for me to be calling someone who has achieved so little a ninja, but…shut up.

Now that we’ve briefly observed the state of affairs of the two parties involved, let’s think about what would happen if they had a serious tiff over, say, who the next man on the moon is going to be. The pirates would understandably vote for John Hammond, who has announced plans to build a lunar Jurassic Park (this is thought to be a misunderstanding by many, who believe that John meant to say “loonier”). The ninjas, however, would vote for someone we don’t even know exists, because they’re tricky like that.

Gradually but steadily, this argument will heat up to such a level that violent outbursts would become inevitable. You would have ninja MMS scandals all over the place, and pirate body parts would litter sparring rings all over the world. The ultimate question, however, is who would win? Indirectly, this is the war between psycho-sociological and physical-political warfare. Can the pirates win while being so passively aggressive? Or will they all be wiped out by the blade of the ninja?

This question can only be answered if we get into the number game. Technically, everyone who has ever committed an act of piracy, and has the potential to do so again can be called a pirate. Which means, if all our illegal music downloads and torrents are taken into account, there are a hell of a lot pirates out there than the total number of ninjas that ever existed. Statistically, during the war, for every pirate a ninja kills there will be a hundred more to take his place, ready with doctored videos to ruin the ninjas’ social life.

If this war continues until one side is conclusively pronounced victor, we will either be left with a few ninjas and people who never had access to the internet, or a planet completely devoid of ninjas but otherwise pretty normal. I’m putting my bet on the latter, because it is a more probable and obviously happier ending for most of us. If the former has even the slightest chance of taking place, though, we’d better geekify those ninjas pronto. Bring out the computer educationalists!

I won’t lie to you, I hadn’t forgotten that I had a blog. I was just too engrossed in a new game I’ve started playing. As you all know - or are supposed to know - my summer vacations are going on and I don’t really have a lot to do. Which basically means that I’ve been playing this game all day for the past few days…

Yes, I know it’s not a very good thing to have done, but it sure was a lot of fun, heh. In fact, I might even go back to it tomorrow for a couple of hours or more. Also, I had decided to stop posting randomly about dumb things…I really don’t like to talk when I have nothing to say, and I see no reason why that rule shouldn’t apply here. So what was it that I had to say for which I made this post?

Well, I wanted to rant on how the media is bad for us. Now before you say “Oh no! The media is great!”, think about it for a second. How do you know what you read in today’s newspaper is true? Is there any way for you to tell what a news report says happened really did happen? Have you ever made the effort to confirm any fact published in the news?

The thing is, the media has the power to defame anyone groundlessly. What can you do if the media slanders you tomorrow? File a defamation suit, perhaps - but that will take quite long to resolve and will sap your money and your time. Hey, what if they publish an apology the next day, will you forgive them? Probably. But how many people do you think read the apology? Even if everyone did, can you just carry on like nothing happened?

At this point this post is so full of question marks that I can’t bear to continue. Anyway, I have already written all that I had to write.

This tutorial is for those who want to give their visitors a simple way to navigate to different places on the same page. For example, a link at the bottom that sends you to the top of the page - especially helpful on long pages, where no one wants to do the scrolling. You will need a very basic knowledge of HTML, the will to brave messing with your source code, and a couple of images (if you want an image link).

Step 1 - Doing it without the images

We’re starting off with the simple concept of anchors - links that link to links that link to nothing. Okay, maybe I need to explain that…an anchor, by itself, is something that exists for the sole purpose of marking a position on a webpage. Then, you can link to that anchor, which will essentially send anyone who clicks the link to the position defined by the anchor. Still don’t get it? Let’s go hands on.

First off, put this line of code right after your <body> tag:

<a name="top" />

This defines the very beginning of your document as the location of the “top” anchor. Next, let’s try linking to it - put the following code where you want your “Back to top” link to appear (you can change the text, of course):

<a href="#top">Back to top</a>

The ‘#’ in there tells your browser that this link is pointing to an anchor and not to an independent URL. After you’re done, try clicking the link. Does it work? If it doesn’t, go back and try again.

Step 2 - CSSing it up + images

Before we go any further, you will need to grab a couple of images: one will be the active link, and the other image will appear when the user hovers the mouse over that link. Let’s say one of the images is named link_normal.gif and the other one is link_hover.gif - note that they must be of the same dimensions, in this case let’s assume they are both 220px by 50px.

All you have to do to your actual code at this point, is to include the following code where the link is to appear:

<a href="#top" class=myanchorlink></a>

Comparing this code to the above without-images HTML, you may notice that there isn’t that much of a difference - all you did was replace the text with a div element. But where is the image, you ask? Well, we’re going to implement that now.

All the real magic will take place in your CSS file. I hope you know where your CSS file is - in case you don’t, you can always view your source and find it. For WordPress the CSS file is style.css in your current theme’s folder. After you find it, add the following code to the end.

.myanchorlink{
width: 220px; //use your own image’s width!
height: 50px; //use your own image’s height!
background: url(images/link_normal.gif); //your image url
cursor: pointer;
display: block;
}
.myanchorlink:hover{
background: url(images/link_hover.gif);
}

Voila! You’re done. Unless you copy-pasted my code without modifications, it should be working fine. If you did just copy-paste my code, it might not work because this is a tutorial that simply gives you an example to modify and implement with your own images.

If you have any problems, drop me a line and I’ll try to help you out.