Solved

Clickable Image With Description (Example Shown)

Posted on 2010-09-18
3
281 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
0
Comment
Question by:tsqlguy
  • 2
3 Comments
 
LVL 3

Accepted Solution

by:
arweeks earned 500 total points
ID: 33710086
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>
0
 
LVL 3

Author Comment

by:tsqlguy
ID: 33710105
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

0
 
LVL 3

Author Comment

by:tsqlguy
ID: 33710113
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.
0

Featured Post

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Woocommerce Global Add Ons 6 15
Link a VBS to an HTA 6 36
Bootstrap show icon when mobile text when computer or tablet 3 38
PHP AJAX JSON 2 61
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question