7 Replies - 33522 Views - Last Post: 27 November 2007 - 04:13 PM

#1 Koenie  Icon User is offline

  • What?!

Reputation: 0
  • View blog
  • Posts: 1,313
  • Joined: 08-July 02

Change The <hr>-color

Posted 10 September 2002 - 12:33 PM

I want to make the <HR>color of a simple HTML site change when I push a button.
You guys all know the <HR> tag, right? Can some1 plz help me out???

Thanks, Koenie
Is This A Good Question/Topic? 0
  • +

Replies To: Change The <hr>-color

#2 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1876
  • View blog
  • Posts: 20,284
  • Joined: 17-March 01

Re: Change The <hr>-color

Posted 10 September 2002 - 12:55 PM

I had to trick Dreamweaver into doing this, but here is the code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="Javascript">
<!--
function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_changeProp(objName,x,theProp,theValue) { //v3.0
  var obj = MM_findObj(objName);
  if (obj && (theProp.indexOf("style.")==-1 || obj.style)) eval("obj."+theProp+"='"+theValue+"'");
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<hr noshade color="orange" id="name">
<p>&nbsp;</p>
<p>
  <input type="submit" name="Submit" value="Change" onclick="MM_changeProp('name','','color','blue','HR')">
</p>
</body>
</html>


This line is where you change what color it changes to:
 <input type="submit" name="Submit" value="Change" onclick="MM_changeProp('name','','color','blue','HR')">


Was This Post Helpful? 0
  • +
  • -

#3 Koenie  Icon User is offline

  • What?!

Reputation: 0
  • View blog
  • Posts: 1,313
  • Joined: 08-July 02

Re: Change The <hr>-color

Posted 11 September 2002 - 11:47 AM

ok thanks!!!!!!
Is that DHTML????

Koenie
Was This Post Helpful? 0
  • +
  • -

#4 codeman  Icon User is offline

  • w3c fanatic

Reputation: 3
  • View blog
  • Posts: 1,190
  • Joined: 13-August 01

Re: Change The <hr>-color

Posted 11 September 2002 - 08:09 PM

I never quite understood what DHTML is. It's just javascript isn't it? :)
Was This Post Helpful? 0
  • +
  • -

#5 supernova333  Icon User is offline

  • D.I.C Addict

Reputation: 4
  • View blog
  • Posts: 590
  • Joined: 12-March 02

Re: Change The <hr>-color

Posted 11 September 2002 - 09:31 PM

yeah, just a fancy name for using html, javascript, & css together
Was This Post Helpful? 0
  • +
  • -

#6 muskaman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 28-June 02

Re: Change The <hr>-color

Posted 12 September 2002 - 07:48 PM

whats the noshade do?
Was This Post Helpful? 0
  • +
  • -

#7 Koenie  Icon User is offline

  • What?!

Reputation: 0
  • View blog
  • Posts: 1,313
  • Joined: 08-July 02

Re: Change The <hr>-color

Posted 21 September 2002 - 12:14 PM

the noshade removes the shade effect, which will make it look sort of 3D

Koenie
Was This Post Helpful? 0
  • +
  • -

#8 qq595653525  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 27-November 07

Re: Change The <hr>-color

Posted 27 November 2007 - 04:13 PM

View Postsupernova333, on 11 Sep, 2002 - 09:31 PM, said:

yeah, just a fancy name for using html, javascript, & css together




hello,everybody

how get Css changed to Html:

that is Code:


body {
background-color: #46CDD9;
margin: 0px;
font-size: 14px;
line-height: 170%;
background-image: url(http://nie.163.com/web/cardshow/images/bg.jpg);
background-repeat: repeat-x;
background-position: top;
}
#top {
height: 262px;
width: 773px;
background-image: url(images/in_top.gif);
background-repeat: no-repeat;
}
p {
margin: 0px;
}
.title {
background-image: url(images/title.gif);
background-repeat: no-repeat;
padding-left: 15px;
background-position: left center;
}
a.copy_black:link { color: #000000;font-size: 14px;}
a.copy_black:visited { color: #000000;font-size: 14px;}
a.copy_black:hover { color: #000000;font-size: 14px;}
.copy_black12 { color: #000000;font-size: 12px;}
.copy_black12 { color: #000000;font-size: 12px;}
.copy_black12 { color: #000000;font-size: 12px;}
a.copy_bold:link {
color: #33312C;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
a.copy_bold:visited {
color: #33312C;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
a.copy_bold:hover {
color: #33312C;
font-size: 14px;
font-weight: bold;
}
a.copy:link {
color: #000000;
font-size: 12px;
text-decoration: none;
}
a.copy:visited {
color: #000000;
font-size: 12px;
text-decoration: none;
}
a.copy:hover {
color: #000000;
font-size: 12px;
text-decoration: none;
}
.orange {
color: #F37021;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.orange_big {
color: #F37021;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
.black_blod {
color: #33312C;
font-weight: bold;
font-size: 14px;
}
.line {
height: 1px;
width: 636px;
background-image: url(images/line.jpg);
background-repeat: no-repeat;
}
.in_bar {
height: 44px;
width: 350px;
}
.border_3 {
height: 189px;
width: 534px;
background-image: url(images/3_border.gif);
background-repeat: no-repeat;
padding-top: 24px;
padding-left: 30px;
}
.border_3_new {
height: 196px;
width: 564px;
background-image: url(images/3_border.gif);
background-repeat: no-repeat;
padding-top: 17px;
text-align: center;
}
.border_4 {
height: 192px;
width: 284px;
background-image: url(images/border_03.gif);
background-repeat: no-repeat;
padding-top: 21px;
text-align: center;
}
.border_4_new {
height: 196px;
width: 284px;
background-image: url(images/border_03.gif);
background-repeat: no-repeat;
padding-top: 17px;
text-align: center;
}
.border_5 {
height: 190px;
width: 409px;
background-image: url(images/border_04.gif);
background-repeat: no-repeat;
padding-top: 23px;
text-align: center;
}
.border_6 {
height: 192px;
width: 201px;
background-image: url(images/border_05.gif);
background-repeat: no-repeat;
padding-top: 23px;
text-align: center;
}
.border_7 {
height: 190px;
width: 654px;
background-image: url(images/border_06.gif);
background-repeat: no-repeat;
padding-top: 23px;
text-align: center;
}
.border_7_new {
height: 195px;
width: 654px;
background-image: url(images/border_06.gif);
background-repeat: no-repeat;
padding-top: 17px;
text-align: center;
}
.border_8 {
height: 190px;
width: 159px;
background-image: url(images/border_07.gif);
background-repeat: no-repeat;
padding-top: 23px;
text-align: center;
}
.border_8_new {
height: 195px;
width: 159px;
background-image: url(images/border_07.gif);
background-repeat: no-repeat;
padding-top: 17px;
text-align: center;
}
.border_9 {
height: 213px;
width: 144px;
background-image: url(images/border_09.gif);
background-repeat: no-repeat;
padding-top:15px;
text-align: center;
}
.border_download {
height: 375px;
width: 644px;
background-image: url(images/download.gif);
background-repeat: no-repeat;
padding-top: 23px;
padding-right: 30px;
padding-left: 30px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
.border_1 {
height: 373px;
width: 691px;
background-image: url(images/border_01.gif);
background-repeat: no-repeat;
padding-top: 25px;
padding-left: 14px;
}
.border_1_new {
height: 196px;
width: 691px;
background-image: url(images/border_01_new.gif);
background-repeat: no-repeat;
padding-top: 17px;
padding-left: 14px;
}
.ptx5 {
padding-top: 10px;
}
.border_2 {
height: 192px;
width: 200px;
background-image: url(images/border_02.gif);
background-repeat: no-repeat;
margin-left: 4px;
text-align: center;
padding-top: 22px;
}
#body {
width: 755px;
margin-right: auto;
margin-left: auto;
height: auto;
}
#index_bg {
height: 275px;
width: 755px;
background-image: url(images/index-bg.gif);
background-repeat: no-repeat;
position: relative;
}
#index_card {
height: 114px;
width: 400px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}
#index_con {
position: relative;
height: 50px;
width: 175px;
left: 530px;
top: 50px;
z-index: 1;
}
#copyright {
padding-top: 15px;
text-align: center;
font-size: 12px;
}

#in_body {
width: 773px;
height: auto;
margin-right: auto;
margin-left: auto;
}
#in_top {
height: 262px;
width: 773px;
background-image: url(images/in_top.gif);
background-repeat: no-repeat;
}
#in_con {
height: auto;
width: 738px;
background-image: url(images/in_bg.gif);
background-repeat: repeat-y;
padding-right: 15px;
padding-left: 20px;
}
#in_con .txt{
font-size: 12px;
padding-right: 20px;
padding-left: 20px;
}

.include {
height: auto;
width: 738px;
}
.include_download {
height: auto;
width: 610px;
text-align: center;
font-size: 12px;
line-height: 20px;
}
.include_download p{
padding-top: 3px;
padding-bottom: 3px;
}
.flower {
height: 149px;
width: 247px;
position: relative;
background-image: url(images/flower.jpg);
background-repeat: no-repeat;
left: 520px;
top: -245px;
}
.include_left {
float: left;
}
.include_right {
float: left;
padding-left: 5px;
}
.include_right_copy {
float: left;
padding-left: 20px;
}
.clear-both {
clear: both;
}
.text_center {
text-align: center;
color: #33312C;
font-size: 18px;
font-weight: bold;
}
#index_person {
height: 315px;
width: 284px;
left: 513px;
z-index: 2;
top: 18px;
position: relative;
}
.pic_padding {
padding-top: 90px;
}
.pic2{
height: 160px;
width: 280px;
position: relative;
top: 300px;
}
#card-show {
position: absolute;
height: 207px;
width: 487px;
background-image: url(http://nie.163.com/web/cardshow/images/card-show.gif);
top: 3px;
left: 70px;
}
#index-nav {
height: 62px;
width: 547px;
}
#card-his {
position: absolute;
height: 135px;
width: 442px;
left: 46px;
top: 97px;
}
#nei-txt {
background-image: url(images/nei-txt-bg.gif);
width: 721px;
height: 189px;
margin-left: 8px;
position: relative;
}
#nei-txt #left{
position: absolute;
height: 150px;
width: 240px;
left: 20px;
top: 16px;
color: #EA5F08;
font-size: 14px;
line-height: 150%;
}
#nei-txt #right{
position: absolute;
height: 140px;
width: 350px;
left: 334px;
top: 16px;
font-size: 12px;
}
.table3 {
font-size: 12px;
line-height: 150%;
text-align: center;
}
.table3 a {
color: #000000;
}
.border_5_new {
height: 383px;
width: 691px;
background-image: url(images/border_01.gif);
background-repeat: no-repeat;
padding-top: 17px;
padding-left: 14px;
}
.border_5_txt {
height: 196px;
width: 409px;
background-image: url(images/border_04.gif);
background-repeat: no-repeat;
padding-top: 17px;
text-align: center;
}

Change it too Html ,thank you ..

If you know please sent Email to me: khlonline@163.com

Thank you very much!!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1