1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to Create Special "Alt" Functionality in HTML?

Discussion in 'Web Design' started by Nigel Farage, Sep 19, 2013.

  1. Nigel Farage

    Nigel Farage BANNED BANNED

    Joined:
    Feb 8, 2012
    Messages:
    563
    Likes Received:
    1,495
    I've seen this in other websites, and I want to use it in this one.

    In a blank field where I can input any HTML text I want (on a WP site), I currently have a price list in a single column.

    Service A - Price A
    Service B - Price B

    etc....

    What I want is to make each Service a link so that when it is clicked, a pop-up appears showing an image that describes the service, or failing that, at least a link to an internal page inside the site. (Inner page would be titled something like "Service A, Explained".)

    I've got the standard command working:

    Code:
    <A HREF="http://www-personal.engin.serviceA.com/">Service A - $ 50.00</A>
    However, I want it to look and function different than standard.

    1) I want the blue text and underline gone, so that the text appears standard.
    2) When the cursor hovers over the text, I want the font to either increase in size by (say) 1 pt., or go bold, or both, to indicate that it's a clickable link.
    3) I'd like a small "click" sound to happen, to further indicate that this text is special, and can be clicked.

    I've seen this functionality before, and I doubt it's a functionality of the WP theme, or even a plugin. My instinct is that it's something that can be done in HTML, but I don't know how to do it, nor do I know the correct words to search for it.

    Any help appreciated, and thanks in advance.
     
    • Thanks Thanks x 1
  2. Asif WILSON Khan

    Asif WILSON Khan Executive VIP Premium Member

    Joined:
    Nov 10, 2012
    Messages:
    10,132
    Likes Received:
    28,592
    Gender:
    Male
    Occupation:
    Fun Lovin' Criminal
    Location:
    London
    Home Page:
    try this search, I don't know if it is exactly right but might point you in the right direction

    or

    Code:
    html javascript highlight table row on click
     
    • Thanks Thanks x 1
  3. Nigel Farage

    Nigel Farage BANNED BANNED

    Joined:
    Feb 8, 2012
    Messages:
    563
    Likes Received:
    1,495
    Update:

    http://www.w3schools.com/css/tryit.asp?filename=trycss_link

    I pasted the following into the page, and the text was shown however the functionality was not there. I assume, since it's talking about the CSS, that I'm going to have to modify the CSS of the WP theme?

    Code:
    <!DOCTYPE html><html>
    <head>
    <style>
    a:link {color:#FF0000;}    /* unvisited link */
    a:visited {color:#00FF00;} /* visited link */
    a:hover {color:#FF00FF;}   /* mouse over link */
    a:active {color:#0000FF;}  /* selected link */
    </style>
    </head>
    
    
    <body>
    <p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
    <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS 
    definition in order to be effective.</p>
    <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order 
    to be effective.</p>
    </body>
    </html>
     
  4. Asif WILSON Khan

    Asif WILSON Khan Executive VIP Premium Member

    Joined:
    Nov 10, 2012
    Messages:
    10,132
    Likes Received:
    28,592
    Gender:
    Male
    Occupation:
    Fun Lovin' Criminal
    Location:
    London
    Home Page:
    I think it is possible to reference multiple CSS files.

    http://www.w3schools.com/css/css_howto.asp

    So you should be able to reference a separate file if you don't want to change the default stylesheet.
    Although I don't think this is ideal, or may be frowned upon by coders.
    I tend to just hack and slash until I get the required functionality, of course this eventually goes tits up.
     
    • Thanks Thanks x 1
  5. Asif WILSON Khan

    Asif WILSON Khan Executive VIP Premium Member

    Joined:
    Nov 10, 2012
    Messages:
    10,132
    Likes Received:
    28,592
    Gender:
    Male
    Occupation:
    Fun Lovin' Criminal
    Location:
    London
    Home Page:
  6. Nigel Farage

    Nigel Farage BANNED BANNED

    Joined:
    Feb 8, 2012
    Messages:
    563
    Likes Received:
    1,495
    Thanks. I'm still looking for help. I've read enough to realize there are several ways to do this. One involves the use of Java Script, which looks like a lot more learning than I intended to do.