 hyperlinking icons over an image? |
  |
| snowpin |
 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.  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. |
  |
 
|
| Frederiek |
Jul 12 2012, 03:25 AM
Post
#2
|
|
Programming Fanatic  Group: Members Posts: 3,539 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 |
|
|
|
| snowpin |
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... |
|
|
|
| pandy |
Jul 12 2012, 05:13 PM
Post
#4
|
|
Don't like donuts. Don't do MySpace. Group: WDG Moderators Posts: 13,722 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  |
 |
|
| snowpin |
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... |
|
|
|
| pandy |
Jul 12 2012, 11:17 PM
Post
#6
|
|
Don't like donuts. Don't do MySpace. Group: WDG Moderators Posts: 13,722 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 |
|
|
|
| snowpin |
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> |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th May 2013 - 02:51 PM |
Invision Power Board
© 2013 IPS, Inc.
Licensed to: HTMLHelp.com, LLC