The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> hyperlinking icons over an image?
snowpin
post Jul 12 2012, 02:26 AM
Post #1





Group: Members
Posts: 4
Joined: 12-July 12
Member No.: 17,422



Okay, I'm really new to HTML. I'm trying to get a bunch of "network icons" over a picture I made in photoshop with all my stream info on it. Is this possible?

Here is what I want it to look like when finished.

IPB Image

The 5 icons at the bottom I want to hyperlink so I'm assuming I have to put those in via code and use img source from an image hoster to put them on and hyper link from there? I have all the X/Y coordinates of where I want the Icons on the page, just not sure how to position them properly and hyperlink...

Could anyone give me a hand?

This is the only code I have on the section.

CODE
<img src="http://i20.photobucket.com/albums/b217/secordjordan2/Untitled-2-2.png" border="0" alt="Photobucket"></a>


Which is just projecting that img without the networks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 12 2012, 03:25 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 3,583
Joined: 23-August 06
From: Europe
Member No.: 9



Just use the usual coding to turn an image into a link for each network icon image:
<a href=...><img src=... alt=...></a>

How to position them, depends on the coding of the rest of the page.
Use the Untitled-2-2.png as mockup reference for the layout, not as the content itself.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
snowpin
post Jul 12 2012, 12:45 PM
Post #3





Group: Members
Posts: 4
Joined: 12-July 12
Member No.: 17,422



QUOTE(Frederiek @ Jul 12 2012, 04:25 AM) *

Just use the usual coding to turn an image into a link for each network icon image:
<a href=...><img src=... alt=...></a>

How to position them, depends on the coding of the rest of the page.
Use the Untitled-2-2.png as mockup reference for the layout, not as the content itself.


The only thing is that it's not actually for a page it's just off of twitch.tv's info section. there is no coding on the page it's just the info box that we do ourselves...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 12 2012, 05:13 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,791
Joined: 9-August 06
Member No.: 6



Didn't follow any of that. If you can use IMG tags, why can't you use A tags?


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
snowpin
post Jul 12 2012, 10:47 PM
Post #5





Group: Members
Posts: 4
Joined: 12-July 12
Member No.: 17,422



I dont know how to use that really... lol not sure how to put coordinates in for the pictures to hyperlink them.

I just know how to put it up as I did, now I need to learn how to put these icons over it...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 12 2012, 11:17 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,791
Joined: 9-August 06
Member No.: 6



What about taking one thing at the time? Get those links in to start with. Or explain in a way we can understand why you can't use links.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
snowpin
post Jul 13 2012, 02:06 AM
Post #7





Group: Members
Posts: 4
Joined: 12-July 12
Member No.: 17,422



Sorry for me being confusing XD I kinda confused myself.

Okay, so I finally got it all working... Kinda.

Here's my currently code and in Dreamweaver it looks perfectly fine but for some reason when I put it on the site there's weird white boxes and a few things aren't lining up... Not sure why.

This is the link to where i posted the code... I still dont know why these white lines appear, almost seems like the images are shifted yet it doesnt show that in dreamweaver... anyone know why?
http://www.twitch.tv/snowpin

CODE
<html>
<head>
<title>Untitled-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-2.psd) -->
<table id="Table_01" width="640" height="801" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="16">
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/rules_bar.jpg" width="640" height="37" alt=""></td>
    </tr>
    <tr>
        <td colspan="16">
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/rules_list.jpg" width="640" height="64" alt=""></td>
    </tr>
    <tr>
        <td colspan="16">
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/characters_bar.jpg" width="640" height="36" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <a href="http://na.leagueoflegends.com/" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/lol_icon.jpg" width="139" height="49" border="0" alt=""></a></td>
        <td colspan="10">
            <a href="http://www.lolking.net/summoner/na/1906" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/lol_char.jpg" width="459" height="49" border="0" alt=""></a></td>
        <td colspan="2" rowspan="3">
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/characters_right.jpg" width="42" height="150" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <a href="https://account.hirezstudios.com/smitegame/" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/smite_icon.jpg" width="139" height="41" border="0" alt=""></a></td>
        <td colspan="10">
            <a href="https://account.hirezstudios.com/smitegame/" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/smite_char.jpg" width="459" height="41" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="4">
            <a href="http://us.battle.net/wow/en/" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/wow_icon.jpg" width="139" height="60" border="0" alt=""></a></td>
        <td colspan="10">
            <a href="http://us.battle.net/wow/en/character/tichondrius/Bioexorcist/simple" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/wow_char.jpg" width="459" height="60" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="16">
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/games_bar.jpg" width="640" height="36" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <a href="http://en.wikipedia.org/wiki/Bastion_(video_game)" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/bastion.jpg" width="199" height="24" border="0" alt=""></a></td>
        <td colspan="11" rowspan="9">
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/right_games.jpg" width="441" height="349" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <a href="http://en.wikipedia.org/wiki/Donkey_Kong_Country" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/donkey_kong_country.jpg" width="199" height="28" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="5">
            <a href="http://en.wikipedia.org/wiki/Final_Fantasy_IV" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/ff_ii.jpg" width="199" height="27" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="5">
            <a href="http://en.wikipedia.org/wiki/Final_Fantasy_VI" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/ff_iii.jpg" width="199" height="23" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="5">
            <a href="http://en.wikipedia.org/wiki/Limbo_(video_game)" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/limbo.jpg" width="199" height="15" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="5">
            <a href="http://en.wikipedia.org/wiki/The_Legend_of_Zelda:_Link's_Awakening" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/loz_awakening.jpg" width="199" height="27" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="5">
            <a href="http://en.wikipedia.org/wiki/The_Legend_of_Zelda:_Oracle_of_Seasons_and_Oracle_of_Ages" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/loz_seasons.jpg" width="199" height="15" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="5">
            <a href="http://en.wikipedia.org/wiki/Super_Meat_Boy" target="_new">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/super_meat_boy.jpg" width="199" height="25" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/bottom_left_games.jpg" width="199" height="165" alt=""></td>
    </tr>
    <tr>
        <td colspan="16">
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/network_bar.jpg" width="640" height="35" alt=""></td>
    </tr>
    <tr>
        <td colspan="16">
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/top_network.jpg" width="640" height="8" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/steam_left.jpg" width="29" height="79" alt=""></td>
        <td>
            <a href="https://steamcommunity.com/id/youreatowel">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/steam_icon.jpg" width="80" height="79" border="0" alt=""></a></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/xfire_left.jpg" width="20" height="79" alt=""></td>
        <td colspan="3">
            <a href="http://www.xfire.com/profile/streamlinevision/">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/xfire_icon.jpg" width="79" height="79" border="0" alt=""></a></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/raptr_left.jpg" width="21" height="79" alt=""></td>
        <td>
            <a href="http://raptr.com/StreamLineVision/wall">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/raptr_icon.jpg" width="85" height="79" border="0" alt=""></a></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/youtube_left.jpg" width="22" height="79" alt=""></td>
        <td>
            <a href="http://www.youtube.com/streamlinevision">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/youtube_icon.jpg" width="81" height="79" border="0" alt=""></a></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/facebook_left.jpg" width="18" height="79" alt=""></td>
        <td>
            <a href="http://www.facebook.com/highspeedman">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/facebook_icon.jpg" width="82" height="79" border="0" alt=""></a></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/twitter_left.jpg" width="16" height="79" alt=""></td>
        <td colspan="2">
            <a href="http://www.twitter.com/snowpin">
                <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/twitter_icon.jpg" width="79" height="79" border="0" alt=""></a></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/twitter_right.jpg" width="28" height="79" alt=""></td>
    </tr>
    <tr>
        <td colspan="16">
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/bottom_network.jpg" width="640" height="6" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="29" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="80" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="20" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="10" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="60" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="9" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="21" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="85" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="22" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="81" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="18" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="82" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="16" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="65" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="14" height="1" alt=""></td>
        <td>
            <img src="http://i20.photobucket.com/albums/b217/secordjordan2/twitch/spacer.gif" width="28" height="1" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th June 2013 - 11:33 PM