Need Hyperlink beneath Icon

DoubleDee · November 16, 2013, 4:00am

In a User’s Private Message Inbox is a column where people can “flag” a Message.

I am in the process of adding the ability to sort by this column.

In the Column’s Heading, I have a Flag icon that I found on WikiPedia Commons.

Is there some way to visually add an HTML hyperlink beneath the icon so people will know to click on it if they want to sort on that column??

Here is a code snippet…


	<th id='colFlag'>
		<a href=''>
			<img src='/images/red_flag_icon.png' width='15' alt='' />
		</a>
	</th>

Unfortunately, you can’t see a hyperlink below it, which is weird, because I was sure I was doing this the correct way?! :-/

Sincerely,

Debbie

ralphm · November 16, 2013, 8:55am

What do you mean by visually add a hyperlink?

PaulOB · November 16, 2013, 11:34am

Hi,

If you mean the text-decoration:underline then that doesn’t get applied to images but you could add a border to the anchor (or to an element around the image if other content is in the same vicinity).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#colFlag a {
	border-bottom:1px solid blue;
	text-decoration:none;
}
#colFlag img a { vertical-align:baseline }
</style>
</head>

<body>
<table>
		<tr>
				<th id='colFlag'> <a href='#'><img src='http://placehold.it/15x15' width='15' height="15" alt='' /></a> </th>
		</tr>
</table>
</body>
</html>

DoubleDee · November 16, 2013, 5:42pm

Paul O’B,

Thank you!!

That is exactly what I was talking about!

Now the only issue is that my Column Headings look a bit off… (*See Vertical Alignment issue in screenshot)

What do you think about how that looks?

Would you do anything to improve it?

Sincerely,

Debbie

PaulOB · November 16, 2013, 10:22pm

Hi,

Maybe the bottom border could be closer to the image.

Make sure the image and the anchor around it are both set to display:block and the border will touch the bottom of the image.

ralphm · November 16, 2013, 10:25pm

Personally, I think it looks awful to have a line under the image like that. A much nicer option is to get the image to change on hover (go a bit darker or another color etc.) A sprite image is good for that.

DoubleDee · November 17, 2013, 4:15am

That didn’t help.

(Maybe I need to post more??)

Debbie

DoubleDee · November 17, 2013, 4:18am

Ouch!

Well, as I’m sure you recall, JavaScript is out for this build.

Is there a way to achieve something that you find more appealing that doesn’t require JavaScript?

If so, I’m open to your ideas!!

Thanks,

Debbie

ralphm · November 17, 2013, 7:59am

I didn’t mention JS. An image rollover like that is standard CSS. http://css-tricks.com/css-sprites/

PaulOB · November 17, 2013, 10:41am

Then its likely that the space under the image is part of your image otherwise the border would touch the image.

How about you just give the image a border on hover instead.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#colFlag a {
	text-decoration:none;
	display:block
}
#colFlag img {
	display:block;
	border:1px solid transparent;	
}
#colFlag a:hover img{border:1px solid blue} 
</style>
</head>

<body>
<table>
		<tr>
				<th id='colFlag'> <a href='#'><img src='http://placehold.it/15x15' width='15' height="15" alt='' /></a> </th>
		</tr>
</table>
</body>
</html>

DoubleDee · November 17, 2013, 8:35pm

I just skimmed the article.

Looks like a good idea down the road, but since I don’t have any Image-Editing Software (e.g. Photoshop), nor do I have any knowledge of such apps, I’m sorta out of luck.

(My flag icon was just downloaded as-is from WikiMedia Commons.)

Sincerely,

Debbie

P.S. I did add a TITLE to the <img> tag with the description “Click to sort by Flag” so if someone hovers over my Flag icon, at least they have that cue.

DoubleDee · November 17, 2013, 8:49pm

Well, I see a tiny gap between the image and the border you added in your last post, but it is only maybe 1px, so it could just be an optical illusion in FireBug.

I could do that, but my goal was to give Users a visual clue that clicking on the Flag Icon will “Sort by Flag”. (For the other columns, I have hyperlinks, so people can see that they can sort by Sender, Subject, and Date.)

I think using the TITLE attribute probably accomplishes the same thing?!

It is starting to look like if I had something like Photoshop it would make my life a lot easier…

Maybe after my website is up, I can download Gimp or Inkscape and start learning them…

Sincerely,

Debbie

P.S. You helped me long ago with a “slice” that I used to create Buttons which when you click on them, look dynamic in that they move a bit. Isn’t there a way to do that with my Flag Icon image? I don’t recall how you helped me do what I did with my blue Buttons, but they sure look cool!!

ronpat · November 17, 2013, 11:30pm

Something to consider:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
    <style type="text/css">

table {
    border-spacing:0;
    margin:0 auto;
}
#colFlag {
    padding:0;
}
#colFlag a {
    outline:1px solid magenta;
    display:inline-block;
    width:17px;  /* if you want the image to move, add the extra px or two */
    height:17px;  /* if you want the image to move, add the extra px or two */
    background:url('http://placehold.it/15x15') no-repeat 0 0;
    border-bottom:1px solid blue;  /* if you prefer an underline, here it is */
}
#colFlag a:hover {
    background-position:100% 100%;  /* if you want the image to move */
    border-bottom-color:red;       /* for demo */
}

    </style>
</head>
<body>

<table>
<tr>
	<th id='colFlag'><a href=''></a></th>
</tr>
</table>

</body>
</html>

Sincerely,
not Paul O’B, not ralph.m

Francky · November 18, 2013, 4:53am

Hi Debbie,

… my goal was to give Users a visual clue that clicking on the Flag Icon will “Sort by Flag”.

The title-attribute is a good idea (but it’s only visible at a hover, while maybe a visitor just doesn’t know (s)he can hover there).
To make it more clear, the word “sort” can be put in the flag-image itself (with 17px width: just enough space for it :)).
As a sprite, with a green flag for the hover state:

[CENTER]
([U][SIZE=2]download[/SIZE][/U])[/CENTER]
The css can be:

#colFlag a {
	margin: 1px;
	width: 17px;
	height: 17px;
	display: block;
	background: url(images/flag_sort_sprite.png);
	}
#colFlag a:hover,
#colFlag a:focus {
	background-position: -17px 0;
	}

And the html:

<tr>
	<th>..</th>
	<th id='colFlag'><a href='#' title="Click to sort by Flag"></a></th>
	<th><a href='#' title="Click to sort by From">From</a></th>
	<th><a href='#' title="Click to sort by Subject">Subject</a></th>
	<th><a href='#' title="Click to sort by Date">Date</a></th>
</tr>

It’s in great lines the same as ronpat’s code.

Test: [U]flag-sprite.htm[/U]

PaulOB · November 18, 2013, 10:48am

Francky’s idea looks good

DoubleDee · November 18, 2013, 4:35pm

Who agrees with Ralph and thinks putting a hyperlink beneath my original Flag icon looks cheesy?

Debbie

ronpat · November 18, 2013, 6:53pm

I think the underline would be consistent with the other underlines. For that reason, I do not think it would look “cheesy”. You could easily use the underline (post 13) as well as Francky’s sprite.

Francky · November 18, 2013, 11:33pm

If the underline is desired, you always can take it up in the image:

or

No worry about distances 1px more or less under the img, just what you want.

DoubleDee · November 19, 2013, 2:06am

Thanks for the sprite, but that doesn’t work for me…

I think it looks bad to have an icon labeled “Sort”.

Sort what?!

Um, every column in the Inbox is sortable, so having a Flag Icon labeled “sort” is confusing (and misleading) at best.

I’ll just trust that most users will think to try clicking on my Flag Icon if they want to sort by that column.

And I think having the other Text Column Headings as hyperlinks should serve as a small cue for the User to consider the possibility that the Flag cloumn is also sortable.

If they hover over it, they will also get the TITLE pop-up which will confirm that this is indeed a sortable column.

I’m not so sure about the hyperlink beneath my Flag icon…

It does look a bit out of place since that icon doesn’t line up as well with the other non-icon Column Headings.

Maybe someday when I learn Gimp/Inkscape I can make my own which fits in better?

Sincerely,

Debbie