HomeHome  SearchSearch  Rules & Guidelines  Staff List  MemberlistMemberlist  RegisterRegister  Log inLog in  
Announcements

September 13th, 2017: Adding tutorials for the badging community! We're looking for volunteers to feature and help us write guides - PM Panton to get started with our project!


July 3rd, 2017: Canvas Tutorials is currently undergoing a major revamp. Please excuse any hiccups or glitches.


Coming soon

About Us

Canvas creates and supports an IMVU education environment. We offer tutorials and assistance from some of the community's most active and knowledgeable. Tutorials by users, for users!

Staff
Staff Updates
Important Links
Statistics
We have 1424 registered users
The newest registered user is Virtualdoll

Our users have posted a total of 2565 messages in 156 subjects
Canvas Time
Share | 
 

 Help with Hyperlinking

View previous topic View next topic Go down 
Pantone

avatar
View user profile
Role : Designer & Coder
Location : Indianapolis, IN, USA
http://pantonedoesgraphics.tumblr.com/

PostSubject: Help with Hyperlinking Mon Oct 10, 2016 11:22 am

• Browser Used: Google Chrome, via iMac
• Is this for an order or personal use?: Personal Use


Code:
<center>

<font face="verdana" size="1">

<img src="http://ultraimg.com/images/2016/09/17/gw9k.png" width="900" height=“714” border="0" usemap="#IM1">

<map id="IM1" name="IM1">
<area shape="rect" alt="" title="" coords="829,25,866,156" href="http://www.imvu.com/shop/web_search.php?manufacturers_id=26435999" target="_blank" />
</map>

<div id="main_box" style="width:626px; height:261px; position:absolute; left:206px; top:139px; color: #a1a1a1; z-index:1; overflow:hidden;">
Product Display
</div>

<div id="prod_box" style="width:224px; height:90px; position:absolute; left:25px; top:428px; color: #a1a1a1; z-index:1; overflow:hidden;">
<!-- Product Marquee generated @ gaf210.imvustylez.net -->
<style type="text/css">.imvustylez_products_marquee{margin:0px auto}.imvustylez_products_marquee [id$="_panel_header"] {display: none !important; font-size: 1px} .imvustylez_products_marquee [id$="_panel_body"] {line-height: 1px;} .imvustylez_products_marquee .productbox,.imvustylez_products_marquee .productbox img{width:100px !important;height:80px !important;}</style>
<marquee class='imvustylez_products_marquee' width='218’ height='100' scrollamount='3' direction='left' behavior='scroll' onmouseover="this.stop()" onmouseout="this.start()"><div style='width:1070px'><script type="text/javascript" src="http://gaf210.imvustylez.net/newprodsbanner/filtered_dev_panel.js.php?dev_id=26435999&pn=new&q=10"></script></div></marquee>
</div>

<div id="first_box" style="width:180px; height:114px; position:absolute; left:258px; top:412px; color: #fff; z-index:1; overflow-y: scroll; overflow-x:hidden;">
<H1>GASR QUEUE</H1>
<br><a href=“http://www.gasrforum.com/t37537-pantone-icon-banner-1-spot-available-o-now-building#1847690”/><img src=“http://ultraimg.com/images/StartOrder.png”></a> <a href=“http://www.canvasforums.com/t518-pantone-icon-banner-open-o-open-ended-slots#8053”/><img src=“http://ultraimg.com/images/StartOrder.png”></a>
<br><H2>Icon / Banner</H2><H2>ONE</H2>
</div>

<div id="second_box" style="width:180px; height:114px; position:absolute; left:449px; top:412px; color: #fff; z-index:1; overflow-y: scroll; overflow-x:hidden;">
<H1>CANVAS QUEUE</H1><H2>Icon / Banner</H2><H2>ONE</H2>
</div>

<div id="third_box" style="width:180px; height:114px; position:absolute; left:640px; top:412px; color: #fff; z-index:1; overflow-y: scroll; overflow-x:hidden;">
<H1>UPDATE</H1><H2>10 • 7 • 16</H2><H2> Getting items together and hopefully going to knock out stuff on the weekends, due to work being overly stressful.</H2>
</div>

<div id="fourth_box" style="width:254px; height:187px; position:absolute; left:37px; top:542px; color: #a1a1a1; z-index:1; overflow-y: scroll; overflow-x:hidden;">
<H1>Header</H1><H3>Subheader</H3>
<br>
<center>Normal <b>Bold</b> <i>Italic</i> <u>Underlined</u> <s> Stroked through</s> <h>Highlighted</h> <a href="google.com">Link</a>
<br>
<center><b>Lorem</b> ipsum dolor sit <i>amet</i>, consectetur <u>adipisicing</u> elit, sed do eiusmod <s>tempor</s> incididunt ut labore et dolore <h>magna</h> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br><br>
<H2>Testarea</H2>
<size1>Size1</size1> <size2>Size2</size2> <size3>Size3</size3> <size4>Size4</size4> <size5>Size5</size5> <size6>Size6</size6> <size7>Size7</size7> <size8>Size8</size8>
<br>
<black>Black</black> <White>White</white> <red>Red</red> <pink>Pink</pink> <yellow>Yellow</yellow> <orange>Orange</orange> <sky>Sky Blue</sky> <blue>Blue</blue> <lime>Lime</lime> <violet>Violet</violet>
<br><br>
<blockquote>
Blockquote goes here!
</blockquote>
</div>

<div id="fifth_box" style="width:254px; height:187px; position:absolute; left:301px; top:542px; color: #a1a1a1; z-index:1; overflow-y: scroll; overflow-x:hidden;">
<H1>Header</H1><H3>Subheader</H3>
<br>
<center>Normal <b>Bold</b> <i>Italic</i> <u>Underlined</u> <s> Stroked through</s> <h>Highlighted</h> <a href="google.com">Link</a>
<br>
<center><b>Lorem</b> ipsum dolor sit <i>amet</i>, consectetur <u>adipisicing</u> elit, sed do eiusmod <s>tempor</s> incididunt ut labore et dolore <h>magna</h> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br><br>
<H2>Testarea</H2>
<size1>Size1</size1> <size2>Size2</size2> <size3>Size3</size3> <size4>Size4</size4> <size5>Size5</size5> <size6>Size6</size6> <size7>Size7</size7> <size8>Size8</size8>
<br>
<black>Black</black> <White>White</white> <red>Red</red> <pink>Pink</pink> <yellow>Yellow</yellow> <orange>Orange</orange> <sky>Sky Blue</sky> <blue>Blue</blue> <lime>Lime</lime> <violet>Violet</violet>
<br><br>
<blockquote>
Blockquote goes here!
</blockquote>
</div>

<div id="sixth_box" style="width:268px; height:187px; position:absolute; left:564px; top:542px; color: #a1a1a1; z-index:1; overflow-y: scroll; overflow-x:hidden;">
<H1>Header</H1><H3>Subheader</H3>
<br>
<center>Normal <b>Bold</b> <i>Italic</i> <u>Underlined</u> <s> Stroked through</s> <h>Highlighted</h> <a href="google.com">Link</a>
<br>
<center><b>Lorem</b> ipsum dolor sit <i>amet</i>, consectetur <u>adipisicing</u> elit, sed do eiusmod <s>tempor</s> incididunt ut labore et dolore <h>magna</h> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br><br>
<H2>Testarea</H2>
<size1>Size1</size1> <size2>Size2</size2> <size3>Size3</size3> <size4>Size4</size4> <size5>Size5</size5> <size6>Size6</size6> <size7>Size7</size7> <size8>Size8</size8>
<br>
<black>Black</black> <White>White</white> <red>Red</red> <pink>Pink</pink> <yellow>Yellow</yellow> <orange>Orange</orange> <sky>Sky Blue</sky> <blue>Blue</blue> <lime>Lime</lime> <violet>Violet</violet>
<br><br>
<blockquote>
Blockquote goes here!
</blockquote>
</div>

<div id="avi_box" style="width:160px; height:220px; position:absolute; left:28px; top:139px; z-index:1; overflow:hidden;">
<img src="http://www.imvu.com/catalog/web_av_pic.php?av=Pantone">
</div>

<style type="text/css">
/* S T Y L E S H E E T  M A D E  B Y  K Y A @ I M V U . C O M

  E T O I L E  L A Y O U T S    (C)  A L L  R I G H T S  R E S E R V E D

  D O  N O T  S T E A L,  A L T E R,  R E D I S T R I B U T E  OR  C O P Y    I N  A N Y    W A Y!

  Y O U  H A V E  B E E N  W A R N E D! */

#div {
overflow-x: hidden!important; }

H1 {
margin: 1;
font: normal 17px century gothic;
color: #664287;
border-bottom:1px dashed #664287;
text-transform:normal;
text-align:center;
letter-spacing: 1pt;
line-height: 19px; }

H2 {
margin: 0;
background: #6f39a0;
font: normal 5pt small fonts;
text-transform: uppercase;
text-align: center;
color: #fff;
line-height: 9px; }

H3 {
font: normal 7px verdana;
text-transform:uppercase;   
color: #fff;
letter-spacing: 5px;
word-spacing: 2px;
line-height: 1pt; }

a:link { color: #6f39a0!important; }
a:visited { color: #6f39a0!important; }
a:active { color: #6f39a0!important; }
a:hover { color: #fff!important; background-color:#6f39a0; cursor: crosshair; }
u { color: #6f39a0!important; }
b { color: #6f39a0!important; }
i { color: #6f39a0!important; }
s { color: #6f39a0!important; }
h {line-height: 13px; color: #fff; background-color: #6f39a0; margin: 0px 2px 0px 2px; padding: 0px 3px 0px 3px; }

size1{font: normal 7pt small fonts; }
size2{font-size: 13px; }
size3{font-size: 16px; }
size4{font-size: 19px; }
size5{font-size: 22px; }
size6{font-size: 25px; }
size7{font-size: 28px; }
size8{font-size: 35px; }

Black{color: #000000; }
White{color: #ffffff; }
Red{color: #d40000; }
Pink{color: #ed6199; }
Yellow{color: #f8c333; }
Orange{color: #d46400; }
Sky{color: #00b4d4; }
Blue{color: #18567a; }
Lime{color: #9ad434; }
Violet{color: #7b22a9; }

blockquote{
font-family: Verdana;
text-align: center;
font-size: 10px;
width: 80%;
color: #664287;
background-color: transparent;
border-left:7px double #664287;
border-right:7px double #664287;
padding: 3px; }

:: selection { background-color: #664287; color: #fff; }
::-moz-selection { background-color: #664287; color: #fff; }
::-webkit-selection { background-color: #664287; color: #fff; }

/* S T Y L E S H E E T  M A D E  B Y  K Y A @ I M V U . C O M

  E T O I L E  L A Y O U T S    (C)  A L L  R I G H T S  R E S E R V E D

  D O  N O T  S T E A L,  A L T E R,  R E D I S T R I B U T E  OR  C O P Y    I N  A N Y    W A Y!

  Y O U  H A V E  B E E N  W A R N E D! */
</style>



So the Hyperlinking in the GASR Queue box has these issues:

A) The links will not load, they go to an IMVU 404 Error Page

B) The images will not show up.



@Pantone / @IKumaI / @Valoish / @MARlSS

__________________________________
CanvasTutorials
ADMIN

Human Resources │ Account Activation │ Ban Control
"May the Force be with you."
Back to top Go down
Valoish

avatar
View user profile
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

PostSubject: Re: Help with Hyperlinking Mon Oct 10, 2016 12:05 pm

@Pantone Fixed c:
Code:
<font face="verdana" size="1">

<img src="http://ultraimg.com/images/2016/09/17/gw9k.png" width="900" height=“714” border="0" usemap="#IM1">

<map id="IM1" name="IM1">
<area shape="rect" alt="" title="" coords="829,25,866,156" href="http://www.imvu.com/shop/web_search.php?manufacturers_id=26435999" target="_blank" />
</map>

<div id="main_box" style="width:626px; height:261px; position:absolute; left:206px; top:139px; color: #a1a1a1; z-index:1; overflow:hidden;">
Product Display
</div>

<div id="prod_box" style="width:224px; height:90px; position:absolute; left:25px; top:428px; color: #a1a1a1; z-index:1; overflow:hidden;">
<!-- Product Marquee generated @ gaf210.imvustylez.net -->
<style type="text/css">.imvustylez_products_marquee{margin:0px auto}.imvustylez_products_marquee [id$="_panel_header"] {display: none !important; font-size: 1px} .imvustylez_products_marquee [id$="_panel_body"] {line-height: 1px;} .imvustylez_products_marquee .productbox,.imvustylez_products_marquee .productbox img{width:100px !important;height:80px !important;}</style>
<marquee class='imvustylez_products_marquee' width='218’ height='100' scrollamount='3' direction='left' behavior='scroll' onmouseover="this.stop()" onmouseout="this.start()"><div style='width:1070px'><script type="text/javascript" src="http://gaf210.imvustylez.net/newprodsbanner/filtered_dev_panel.js.php?dev_id=26435999&pn=new&q=10"></script></div></marquee>
</div>

<div id="first_box" style="width:180px; height:114px; position:absolute; left:258px; top:412px; color: #fff; z-index:1; overflow-y: scroll; overflow-x:hidden;">
<H1>GASR QUEUE</H1>
<br><a href="http://www.gasrforum.com/t37537-pantone-icon-banner-1-spot-available-o-now-building#1847690"/><img src="http://ultraimg.com/images/StartOrder.png"></a> <a href="http://www.canvasforums.com/t518-pantone-icon-banner-open-o-open-ended-slots#8053"/><img src="http://ultraimg.com/images/StartOrder.png"></a>
<br><H2>Icon / Banner</H2><H2>ONE</H2>
</div>

<div id="second_box" style="width:180px; height:114px; position:absolute; left:449px; top:412px; color: #fff; z-index:1; overflow-y: scroll; overflow-x:hidden;">
<H1>CANVAS QUEUE</H1><H2>Icon / Banner</H2><H2>ONE</H2>
</div>

<div id="third_box" style="width:180px; height:114px; position:absolute; left:640px; top:412px; color: #fff; z-index:1; overflow-y: scroll; overflow-x:hidden;">
<H1>UPDATE</H1><H2>10 • 7 • 16</H2><H2> Getting items together and hopefully going to knock out stuff on the weekends, due to work being overly stressful.</H2>
</div>

<div id="fourth_box" style="width:254px; height:187px; position:absolute; left:37px; top:542px; color: #a1a1a1; z-index:1; overflow-y: scroll; overflow-x:hidden;">
<H1>Header</H1><H3>Subheader</H3>
<br>
<center>Normal <b>Bold</b> <i>Italic</i> <u>Underlined</u> <s> Stroked through</s> <h>Highlighted</h> <a href="google.com">Link</a>
<br>
<center><b>Lorem</b> ipsum dolor sit <i>amet</i>, consectetur <u>adipisicing</u> elit, sed do eiusmod <s>tempor</s> incididunt ut labore et dolore <h>magna</h> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br><br>
<H2>Testarea</H2>
<size1>Size1</size1> <size2>Size2</size2> <size3>Size3</size3> <size4>Size4</size4> <size5>Size5</size5> <size6>Size6</size6> <size7>Size7</size7> <size8>Size8</size8>
<br>
<black>Black</black> <White>White</white> <red>Red</red> <pink>Pink</pink> <yellow>Yellow</yellow> <orange>Orange</orange> <sky>Sky Blue</sky> <blue>Blue</blue> <lime>Lime</lime> <violet>Violet</violet>
<br><br>
<blockquote>
Blockquote goes here!
</blockquote>
</div>

<div id="fifth_box" style="width:254px; height:187px; position:absolute; left:301px; top:542px; color: #a1a1a1; z-index:1; overflow-y: scroll; overflow-x:hidden;">
<H1>Header</H1><H3>Subheader</H3>
<br>
<center>Normal <b>Bold</b> <i>Italic</i> <u>Underlined</u> <s> Stroked through</s> <h>Highlighted</h> <a href="google.com">Link</a>
<br>
<center><b>Lorem</b> ipsum dolor sit <i>amet</i>, consectetur <u>adipisicing</u> elit, sed do eiusmod <s>tempor</s> incididunt ut labore et dolore <h>magna</h> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br><br>
<H2>Testarea</H2>
<size1>Size1</size1> <size2>Size2</size2> <size3>Size3</size3> <size4>Size4</size4> <size5>Size5</size5> <size6>Size6</size6> <size7>Size7</size7> <size8>Size8</size8>
<br>
<black>Black</black> <White>White</white> <red>Red</red> <pink>Pink</pink> <yellow>Yellow</yellow> <orange>Orange</orange> <sky>Sky Blue</sky> <blue>Blue</blue> <lime>Lime</lime> <violet>Violet</violet>
<br><br>
<blockquote>
Blockquote goes here!
</blockquote>
</div>

<div id="sixth_box" style="width:268px; height:187px; position:absolute; left:564px; top:542px; color: #a1a1a1; z-index:1; overflow-y: scroll; overflow-x:hidden;">
<H1>Header</H1><H3>Subheader</H3>
<br>
<center>Normal <b>Bold</b> <i>Italic</i> <u>Underlined</u> <s> Stroked through</s> <h>Highlighted</h> <a href="google.com">Link</a>
<br>
<center><b>Lorem</b> ipsum dolor sit <i>amet</i>, consectetur <u>adipisicing</u> elit, sed do eiusmod <s>tempor</s> incididunt ut labore et dolore <h>magna</h> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br><br>
<H2>Testarea</H2>
<size1>Size1</size1> <size2>Size2</size2> <size3>Size3</size3> <size4>Size4</size4> <size5>Size5</size5> <size6>Size6</size6> <size7>Size7</size7> <size8>Size8</size8>
<br>
<black>Black</black> <White>White</white> <red>Red</red> <pink>Pink</pink> <yellow>Yellow</yellow> <orange>Orange</orange> <sky>Sky Blue</sky> <blue>Blue</blue> <lime>Lime</lime> <violet>Violet</violet>
<br><br>
<blockquote>
Blockquote goes here!
</blockquote>
</div>

<div id="avi_box" style="width:160px; height:220px; position:absolute; left:28px; top:139px; z-index:1; overflow:hidden;">
<img src="http://www.imvu.com/catalog/web_av_pic.php?av=Pantone">
</div>

<style type="text/css">
/* S T Y L E S H E E T  M A D E  B Y  K Y A @ I M V U . C O M

  E T O I L E  L A Y O U T S    (C)  A L L  R I G H T S  R E S E R V E D

  D O  N O T  S T E A L,  A L T E R,  R E D I S T R I B U T E  OR  C O P Y    I N  A N Y    W A Y!

  Y O U  H A V E  B E E N  W A R N E D! */

#div {
overflow-x: hidden!important; }

H1 {
margin: 1;
font: normal 17px century gothic;
color: #664287;
border-bottom:1px dashed #664287;
text-transform:normal;
text-align:center;
letter-spacing: 1pt;
line-height: 19px; }

H2 {
margin: 0;
background: #6f39a0;
font: normal 5pt small fonts;
text-transform: uppercase;
text-align: center;
color: #fff;
line-height: 9px; }

H3 {
font: normal 7px verdana;
text-transform:uppercase;    
color: #fff;
letter-spacing: 5px;
word-spacing: 2px;
line-height: 1pt; }

a:link { color: #6f39a0!important; }
a:visited { color: #6f39a0!important; }
a:active { color: #6f39a0!important; }
a:hover { color: #fff!important; background-color:#6f39a0; cursor: crosshair; }
u { color: #6f39a0!important; }
b { color: #6f39a0!important; }
i { color: #6f39a0!important; }
s { color: #6f39a0!important; }
h {line-height: 13px; color: #fff; background-color: #6f39a0; margin: 0px 2px 0px 2px; padding: 0px 3px 0px 3px; }

size1{font: normal 7pt small fonts; }
size2{font-size: 13px; }
size3{font-size: 16px; }
size4{font-size: 19px; }
size5{font-size: 22px; }
size6{font-size: 25px; }
size7{font-size: 28px; }
size8{font-size: 35px; }

Black{color: #000000; }
White{color: #ffffff; }
Red{color: #d40000; }
Pink{color: #ed6199; }
Yellow{color: #f8c333; }
Orange{color: #d46400; }
Sky{color: #00b4d4; }
Blue{color: #18567a; }
Lime{color: #9ad434; }
Violet{color: #7b22a9; }

blockquote{
font-family: Verdana;
text-align: center;
font-size: 10px;
width: 80%;
color: #664287;
background-color: transparent;
border-left:7px double #664287;
border-right:7px double #664287;
padding: 3px; }

:: selection { background-color: #664287; color: #fff; }
::-moz-selection { background-color: #664287; color: #fff; }
::-webkit-selection { background-color: #664287; color: #fff; }

/* S T Y L E S H E E T  M A D E  B Y  K Y A @ I M V U . C O M

  E T O I L E  L A Y O U T S    (C)  A L L  R I G H T S  R E S E R V E D

  D O  N O T  S T E A L,  A L T E R,  R E D I S T R I B U T E  OR  C O P Y    I N  A N Y    W A Y!

  Y O U  H A V E  B E E N  W A R N E D! */
</style>

The problem was the same as last time xD Macs make the quotation marks rounded, which is not the standard quotation mark that are used in coding.
I think the way to work around it is to press Ctrl+Z after making a rounded quote mark to undo the rounded styling that automatically gets applied.


Pink one is the standard quote mark, blue is the one from your Mac

__________________________________
CanvasTutorials
ADMIN


Technician | Theft Council | Forum Design
"Love Truth and Pardon Error."

Back to top Go down
Pantone

avatar
View user profile
Role : Designer & Coder
Location : Indianapolis, IN, USA
http://pantonedoesgraphics.tumblr.com/

PostSubject: Re: Help with Hyperlinking Mon Oct 10, 2016 12:22 pm

UGH okay not getting a Mac when I go to buy.
Like. This quotation shiiiiiiiiiiiiiiiiizz is really annoying. LOL.

Thank you for helping solve this <3 #HBADsolved

__________________________________
CanvasTutorials
ADMIN

Human Resources │ Account Activation │ Ban Control
"May the Force be with you."
Back to top Go down
 
Help with Hyperlinking
View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
 :: HBAD REALM :: HBAD • Coding :: HBAD • Coding Repair-
Jump to: