Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

Solved

Clickable Image With Description (Example Shown)

Posted on 2010-09-18

1 solution

Medium Priority

292 Views

Last Modified: 2012-05-10

Good Evening Experts,

Hopefully there is someone around that can answer this. I'm trying to mimick something that was in a temporary wordpress blog of mine, into my new asp.net webpage.

Here is the problem

I need to have an image, with a black bar at the bottom at 75% opacity that has the title of the blog post in it. The image and bar as a whole needs to be clickable as a link.

You can see what I'm doing at http://www.wowplatinum.com - Please look at the 5 images at the bottom of the home page.

Now please look at http://blog.wowplatinum.com and you will see a similar setup in the top three images.

Essentially I'm trying to mimick this look and feel into the 5 images posted at the bottom of the first page described.

If someone can help me I would be very grateful!

Thank you in advance for your time!

- Tsqlguy

Comment

Question by:tsqlguy

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

3 Comments

LVL 3

Accepted Solution

by:arweeks

arweeks earned 2000 total points

ID: 337100862010-09-18

The second link, the image isn't clickable, just the link below.

Have you tried replicating what they are doing? They start with a holding div, (background image is the tile image), then a link, then a table to hold everything with another div using the opaque image as a background. Then they close it all off. It's not particularly elegant, but it seems to answer to your needs OK

<div style="width: 188px; border: 0px; height: 188px; background-image: url('Images/Articles/Mini/PiratesDay.png');
vertical-align: bottom;">

<a href="CP.aspx" style="text-decoration:none;">
<table style="width: 188px; height: 188px; border-collapse: collapse;" cellpadding="0">
<tr>
<td style="vertical-align: bottom;">
<div style="background-image: url('Images/Background/OpaqueBack.png'); color: White;
font-family: Arial; padding:2px;">
[Event: Pirates' Day]
</div>

LVL 3

Author Comment

by:tsqlguy

ID: 337101052010-09-18

It seems as if the code you posted back to me is exactly what I have on my website right now.

It seems to work part of the time in firefox but some of them aren't working... This is the code i have right now that doesn't always seem to work...

<div style="width: 188px; border: 0px; height: 188px; background-image: url('Images/Articles/Mini/PiratesDay.png');
                                        vertical-align: bottom;">
                                        <a href="CP.aspx" style="text-decoration:none;">
                                            <table style="width: 188px; height: 188px; border-collapse: collapse;" cellpadding="0">
                                                <tr>
                                                    <td style="vertical-align: bottom;">
                                                        <div style="background-image: url('Images/Background/OpaqueBack.png'); color: White;
                                                            font-family: Arial; padding:2px;">
                                                            [Event: Pirates' Day]
                                                        </div>
                                                    </td>
                                                </tr>
                                            </table>
                                        </a>
                                    </div>

Open in new window

LVL 3

Author Comment

by:tsqlguy

ID: 337101132010-09-18

Ahh excuse me I see what you're saying for some reason I thought the image on the second link was clickable.

Do you know of a way that I could do it that would work, because what I have now seems to work about 60% of the time.

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Easy Step: How to Create Context Sensitive Help

Article by: Roayn

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) , first we need to make the file that contains all topics, which are given exclusive IDs. …

How a “Why Us” Page Makes Your Business Stand Out

Article by: Lexie

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.

Setting Up a RSS Feed forWordPress

Video by: Alex

The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

Flexible Layouts

Video by: Mark

Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).