Improving/Designing Page Links

When adding links to my home webpage, I realized that I wanted more that just the plain (link) display. I thought of how the link is often a picture on other sites, or even the better the link was responsive when moused over. While turning a picture into a link wasn’t an overwhelming task, making a link that was responsive to a cursor proved to be challenging.

1) Implementing Picture Links

Once you’ve determined the picture you want to use as a link, enter the code:

<a href="target website url">
 <img src="name of picture" />
</a>

Simply add the name of the desired picture in the double quotations.
BE SURE TO ALSO ADD THE IMAGE INTO THE SAME FOLDER AS THE HTML FILE, this can often be overlooked.

2) Implementing JavaScript to Links

Next I wanted to create a picture link in which the image would change when hovering the cursor over the link. For example, imagine a image link, where the image was a closed door. When sliding the cursor over the closed door image, it would turn to an opened door. Apparently the best way to do this, is to implement JavaScript in the source file.

The first thing to do was create a section in the html source file, which was declared with  a <script> tag. Inside the script section, the images must be declared as variables, and a function for switching images must be created. This is represented by the following code:

<SCRIPT>

doorClose = new Image
doorClose.src = “close.png”
doorOpen = new Image
doorOpen.src = “open.png”

function changeImg(cImg, ref){
document.images[cImg].src = ref.src
}
</SCRIPT>

Next, you must edit the code where the original picture link was called.  Originally,a picture link would look something like this:

<a href=”pictures.html” <img src =”back.png” border =”0″ name=”cardBack”>
</a>

But now, you must add the mouseOver code in, to make this link responsive. When finished, you would end up with something like this:

<a href=”pictures.html” onMouseOver=”changeImg(‘doorShut’,doorOpen)”
onMouseOut=”changeImg(‘doorShut’,doorClose)”>
<img src =”close.png” border =”0″ name=”doorShut”>
</a>

Basically, there are two actions that are being defined.
1) onMouseOver – When scrolling over
2) onMouseOut – When no longer scrolling over

*Once again, be sure to also include the images in the same folder as the html file

**Always be sure to carefully proofread code, it is very easy to miss characters such as a “>” which will alter the entire outcome.

 

-Frank Dyska

~ by fdyska on January 21, 2013.

One Response to “Improving/Designing Page Links”

  1. This section:
    “Simply add the name of the desired picture in the double quotations.
    BE SURE TO ALSO ADD THE IMAGE INTO THE SAME FOLDER AS THE HTML FILE, this can often be overlooked”
    would better fit into the post if it were displayed in the same way as the rest of the how-to text, rather than being part of the code text. It would also help to mention that the image doesn’t necessarily have to be placed in the general html file, but can be put in an image folder that can be referenced to in the “src” section of the code.

    This guide is easy to follow along, and the closed door/open door analogy helps grasp the concept of what the how-to guide aims to describe. The double-asterisked note at the end is also helpful as general advice about html coding. What this guide could use are tags which would make it easy to find from the search bar, and more consistency in the text formatting. The guide would look cleaner and would be easier to read if the instructions were formatted consistently, as touched on above, and if all of the code were likewise formatted consistently.

    Overall, in terms of how-to content this post excels, not only providing relatable examples but also extrapolating to html coding advice in general. In terms of formatting and tagging it needs a little bit of polish.

    -Joe Laudato

Comments are closed.

 
%d bloggers like this: