Search
Left Quote    I find that the harder I work, the more luck I seem to have.
- Thomas Jefferson    		 Right Quote
 
[login] | [Register]
Forum Index » Visual Basic » Viewing Topic and Replies
Post Reply


        Viewing Topic: Mouserover script..
  This user is offline  retarded
  Subject: "Mouserover script.." Posted: @ 6:39 am on Jun 27 2007   
Member #: 357
Rank: User - (18)
Since: 06/26/07
Posts: 22
Ok another newbie question..
I use Dreamweaver, and im trying to figure out how to make a mouseover effect, where when you point it changes color to red.. something verry simple.. i was researching online and all the turorials are like crazy complicated with MILLLLLLIONS of functions that i dont want..

This is what i have so far, its my first style, dont have script for 2nd style or color code.. help if u want/can.. im sure other people are going to want to know this to.

:) thanks in advance.. (bs0d) and Winterdance.. u guys are the best.. and allways respond

here is my crapy code
Code:
<!DOCTYPE html PUBLIC "-//W3C//D TD XHTML 1.0 Transitional//E N" "http://ww w.w3.org/TR/xht ml1/DTD/xhtml1- transitional.dt d">
<html xmlns="htt p://www.w3.org/ 1999/xhtml" ;>
<head>
<meta http-equiv=&quo t;Content-Type& quot; content="t ext/html; charset=utf-8&q uot; />
<title>Un titled Document</ti tle>
<style type="text /css">< br /> <!--
#Linkbar {
font-family: "Times New Roman", Times, serif;
font-size: 12.5px;
color: #ffffff;
background-col or: #2b2b2b;
vertical-align : middle;
margin: auto;
padding: 0px;
height: 18px;
width: 538px;
border: thin inset #1c1c1c;
position: fixed;
visibility: visible;
text-align: center;
}
-->
</style>< br /> </head>
<body>
<div class="Lin kbar" id="Linkba r"> | Home | Pc | Psp | Ps2 | Ps3 | Xbox | Xbox360 | GameCube | Wii | Ds | Gameboy Advanced | Cheats | GEAR |</div> </body> </html>



    Viewed: 9,023 Times | Reply to This | To top
  This user is offline  sm0ke
  Subject: "re: Mouserover script.." Posted: @ 9:11 am on Jun 27 2007    

Member #: 168
Rank: User - (83)
Since: 06/05/06
Posts: 34
From: Manchester - UK

Think this is in the wrong section mate. You can use CSS to get the mouseover effect: try the following:


Code:


a.linkbar {
color: #FF6600;
text-decoration : none; (removes the underline)
}

a.linkbar:hover {
color: #FF0000;
border-bottom: 1px dashed #FF0000;
}


The above 2 css statements will

1 Set the link color in the class linkbar (a.linkbar)

2 Set the link color to red with a dahsed border underneath when a mouse is hovered over the link (a.linkbar:hove r)



Edited at 09:17:15 am on 06/27/07

Just because I dont care, doesnt mean I dont understand.
purepcs@hotmail .co.uk |     Viewed: 9,016 Times | Reply to This | To top
  This user is offline  retarded
  Subject: "re: Mouserover script.." Posted: @ 4:21 pm on Jun 27 2007    
Member #: 357
Rank: User - (18)
Since: 06/26/07
Posts: 22

Well i tried that this morning.. had no luck...

This is what i have now, when i hover over nothing happens..

If you find something better, please write the entire code so i can compare it to mine.. (<<< lol kinda new to this php thing) i think i might be going to fast into this. But i think with the help of this board.. il be able to learn this.
Code:

<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//E N" "http://w ww.w3.org/TR/xh tml1/DTD/xhtml1 -transitional.d td"> <html xmlns="ht tp://www.w3.org /1999/xhtml&qu ot;>
<head>
<meta http-equiv=&qu ot;Content-Type " content=" text/html; charset=utf-8& quot; />
<title>li nkbar2</titl e>
<style type="tex t/css"> ;
<!--
a.Linkbar {
font-family: "Times New Roman", Times, serif;
font-size: 12.5px;
color: #ffffff;
background-col or: #2b2b2b;
vertical-align : middle;
margin: auto;
padding: 0px;
height: 18px;
width: 538px;
border: thin inset #1c1c1c;
position: fixed;
visibility: visible;
text-align: center;
}
a.linkbar:hover {
font-family: "Times New Roman", Times, serif;
font-size: 12.5px;
color: #ffffff;
background-col or: #FF0000;
vertical-align : middle;
margin: auto;
padding: 0px;
height: 18px;
width: 538px;
border: thin inset #1c1c1c;
position: fixed;
visibility: visible;
text-align: center;
border-bottom: 1px dashed #FF0000;
}

-->
</style>< br /> </head>
<body>
<div class="a. Linkbar" id="a.Lin kbar"> | Home| Pc | Psp | Ps2 | Ps3 | Xbox | Xbox360 | GameCube | Wii | Ds | Gameboy Advanced | Cheats | GEAR |</div> </body> </html>



Edited at 04:23:05 pm on 06/27/07

    Viewed: 9,005 Times | Reply to This | To top
  This user is offline  sm0ke
  Subject: "re: Mouserover script.." Posted: @ 9:23 pm on Jun 27 2007    

Member #: 168
Rank: User - (83)
Since: 06/05/06
Posts: 34
From: Manchester - UK

OK

I edited your code below:


Code:


<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//E N" "http://w ww.w3.org/TR/xh tml1/DTD/xhtml1 -transitional.d td"> <html xmlns="ht tp://www.w3.org /1999/xhtml&qu ot;>
<head>
<meta http-equiv=&qu ot;Content-Type " content=" text/html; charset=utf-8& quot; />
<title>li nkbar2</titl e>
<style type="tex t/css"> ;
<!--
#Linkbar {
font-family: Times New Roman, Times, serif;
font-size: 12.5px;
color: #ffffff;
background-colo r: #2b2b2b;
vertical-align: middle;
margin: auto;
padding: 0px;
height: 18px;
width: 538px;
border: thin inset #1c1c1c;
position: fixed;
visibility: visible;
text-align: center;
}

a.linkbar:hover {
font-family: Times New Roman, Times, serif;
font-size: 12.5px;
color: #ffffff;
background-colo r: #FF0000;
vertical-align: middle;
margin: auto;
padding: 0px;
height: 18px;
width: 538px;
border: thin inset #1c1c1c;
position: fixed;
visibility: visible;
text-align: center;
border-bottom: 1px dashed #FF0000;
}

-->
</style>< br /> </head>
<body>
<div id="Linkb ar"> | Home| Pc | Psp | Ps2 | Ps3 | Xbox | Xbox360 | GameCube | Wii | Ds | Gameboy Advanced | Cheats | GEAR |</div> </body> </html>



This brings up the menu but no links are set "<a href=" so you would need to set the links along with the correct css class. The following example i think achieves what you want, I've added the a.Linkbar class to control the links before they are hovered over:


Code:

<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//E N" "http://w ww.w3.org/TR/xh tml1/DTD/xhtml1 -transitional.d td"> <html xmlns="ht tp://www.w3.org /1999/xhtml&qu ot;>
<head>
<meta http-equiv=&qu ot;Content-Type " content=" text/html; charset=utf-8& quot; />
<title>li nkbar2</titl e>
<style type="tex t/css"> ;
<!--
#Linkbar {
font-family: Times New Roman, Times, serif;
font-size: 12.5px;
color: #ffffff;
background-colo r: #2b2b2b;
vertical-align: middle;
margin: auto;
padding: 0px;
height: 18px;
width: 538px;
border: thin inset #1c1c1c;
position: fixed;
visibility: visible;
text-align: center;
}
a.Linkbar {
font-family: Times New Roman, Times, serif;
font-size: 12.5px;
color: #ffffff;
background-colo r: #2b2b2b;
}
a.Linkbar:hover {
font-family: Times New Roman, Times, serif;
font-size: 12.5px;
color: #ffffff;
background-colo r: #FF0000;
border-bottom: 1px dashed #FF0000;
}

-->
</style>< br /> </head>
<body>


<div id="Linkb ar"> |<a class="Li nkbar" href="#& quot;> Home</a>| <a class="Li nkbar" href="#& quot;>Pc< /a> | <a class="Li nkbar" href="#& quot;>Psp< ;/a> | <a class="Li nkbar" href="#& quot;>Ps2< ;/a> | <a class="Li nkbar" href="#& quot;>Ps3< ;/a> | <a class="Li nkbar" href="#& quot;>Xbox&l t;/a> | <a class="Li nkbar" href="#& quot;>Xbox36 0</a> | <a class="Li nkbar" href="#& quot;>GameCu be</a> | <a class="Li nkbar" href="#& quot;>Wii< ;/a> | <a class="Li nkbar" href="#& quot;>Ds< /a> | <a class="Li nkbar" href="#& quot;>Gamebo y Advanced</a& gt; | <a class="Li nkbar" href="#& quot;>Cheats </a> | <a class="Li nkbar" href="#& quot;>GEAR&l t;/a> |</div>
</body> </html>



try to copy and paste into notepad, save as 1.htm and launh it in a browser, see if it works.

Generally I would write a seperate css document and include it into the page with the "<link rel=" tagin the head of the html document.

Cheers



Just because I dont care, doesnt mean I dont understand.
purepcs@hotmail .co.uk |     Viewed: 8,993 Times | Reply to This | To top
  This user is offline  retarded
  Subject: "re: Mouserover script.." Posted: @ 2:29 am on Jun 28 2007    
Member #: 357
Rank: User - (18)
Since: 06/26/07
Posts: 22

wasnt exactly what i wanted.. but thanks to the code u pasted i was able to compare it and make sense out of it.. now i got it exactly the way i wanted it.. THANKS MAN! ur great.
here is what i changed.. not much worth mentioning.. but lol here.. im sure other people will want to see this to.
just curious but what do you use for your php.. i see your opening statement is a bit different from mine.

Code:


<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//E N" "http://w ww.w3.org/TR/xh tml1/DTD/xhtml1 -transitional.d td"> <html xmlns="ht tp://www.w3.org /1999/xhtml&qu ot;>
<head>
<meta http-equiv=&qu ot;Content-Type " content=" text/html; charset=utf-8& quot; />
<title>li nkbar2</titl e>
<style type="tex t/css"> ;
<!--
#Linkbar {
font-family: Times New Roman, Times, serif;
font-size: 12.5px;
color: #ffffff;
background-colo r: #2b2b2b;
vertical-align: middle;
margin: auto;
padding: 0px;
height: 18px;
width: 538px;
border: thin inset #1c1c1c;
position: fixed;
visibility: visible;
text-align: center;
}
a.Linkbar {
font-family: Times New Roman, Times, serif;
font-size: 12.5px;
color: #ffffff;
background-colo r: #2b2b2b;
}
a.Linkbar:hover {
font-family: Times New Roman, Times, serif;
font-size: 12.5px;
color: #e52f00;
background-colo r: #2b2b2b;
border-bottom: 1px dashed #FF0000;
}

-->
</style>< br /> </head>
<body>


<div id="Linkb ar"> |<a class="Li nkbar" href="#& quot;> Home</a>| <a class="Li nkbar" href="#& quot;>Pc< /a> | <a class="Li nkbar" href="#& quot;>Psp< ;/a> | <a class="Li nkbar" href="#& quot;>Ps2< ;/a> | <a class="Li nkbar" href="#& quot;>Ps3< ;/a> | <a class="Li nkbar" href="#& quot;>Xbox&l t;/a> | <a class="Li nkbar" href="#& quot;>Xbox36 0</a> | <a class="Li nkbar" href="#& quot;>GameCu be</a> | <a class="Li nkbar" href="#& quot;>Wii< ;/a> | <a class="Li nkbar" href="#& quot;>Ds< /a> | <a class="Li nkbar" href="#& quot;>Gamebo y Advanced</a& gt; | <a class="Li nkbar" href="#& quot;>Cheats </a> | <a class="Li nkbar" href="#& quot;>GEAR&l t;/a> |</div>
</body> </html>



    Viewed: 8,986 Times | Reply to This | To top
  This user is offline  sm0ke
  Subject: "re: Mouserover script.." Posted: @ 9:41 am on Jun 28 2007    

Member #: 168
Rank: User - (83)
Since: 06/05/06
Posts: 34
From: Manchester - UK

I use metapad to hardcode everything, sometime dreamweaver if i have too much trouble with things, then i can play in dreamweaver and clean in metapad. but as a general rule I hand code all my work in metapad.

This btw is not PHP, this is pure XHTML and CSS for markup, position, layout and styling.

I think the difference you mean is the line break at the top? thats the only one i can see, its due to my laziness, if i was developiong a site there would be no whitespace at the top of the document.

Also you can cut down on code here, try changing this:


Code:


#Linkbar {
font-family: Times New Roman, Times, serif;
font-size: 12.5px;
color: #ffffff;
background-colo r: #2b2b2b;
vertical-align: middle;
margin: auto;
padding: 0px;
height: 18px;
width: 538px;
border: thin inset #1c1c1c;
position: fixed;
visibility: visible;
text-align: center;
}
a.Linkbar {
font-family: Times New Roman, Times, serif;
font-size: 12.5px;
color: #ffffff;
background-colo r: #2b2b2b;
}
a.Linkbar:hover {
font-family: Times New Roman, Times, serif;
font-size: 12.5px;
color: #e52f00;
background-colo r: #2b2b2b;
border-bottom: 1px dashed #FF0000;
}



to this


Code:

#Linkbar {
font-family: Times New Roman, Times, serif;
font-size: 12.5px;
color: #ffffff;
background-colo r: #2b2b2b;
vertical-align: middle;
margin: auto;
padding: 0px;
height: 18px;
width: 538px;
border: thin inset #1c1c1c;
position: fixed;
visibility: visible;
text-align: center;
}
a.Linkbar {
color: #ffffff;
}
a.Linkbar:hover {
color: #e52f00;
border-bottom: 1px dashed #FF0000;
}



Edited at 09:46:10 am on 06/28/07

Just because I dont care, doesnt mean I dont understand.
purepcs@hotmail .co.uk |     Viewed: 8,975 Times | Reply to This | To top
Viewing Page: 1 of 1


1 |

You must be logged in to post on the forums. Login or Register


"AllSyntax.com" Copyright © 2002-2018; All rights lefted, all lefts righted.
Privacy Policy  |  Internet Rank