Klassenerweiterung eines Java-Script

  • #1
E

eselhund

Bekanntes Mitglied
Themenersteller
Dabei seit
25.10.2005
Beiträge
119
Reaktionspunkte
0
Hab hier ein kleines Modell des eigentlichen Problems. Das Problem eigentliche Problem bei der Sache ist dass ich die drei Abschnitte getrennt voneinander steuern möchte.

Also ich erklärs mal so:
Ich habe eine Übersichtsseite mit mehreren Diagrammen (ca.15) welche unterhalb der Links sind und durch betätigen der Links verändert sich die Ansicht des Diagramms. Was durch die Farbgebung der einzelnen Links verdeutlicht werden sollte. Deswegen ist auch in diesem Beispiel schon von Start an der erste rot hinterlegt.
Und immer wenn ich ein anderes anwähle soll natürlich dieses rot hinterlegt werden.

Nur ist es momentan so, dass es lediglich für ein einziges Diagramm funktionieren würde, da ich die Abschnitte bzw. Diagramme in Klassen einteilen muss damit richtig funktioniert!

Hoffe das ist nach dem zweitenmal durchlesen verständlich ;)



Code: 
<html>
<head>
<title>Unbenannt</title>

<style type=text/css>
<!--
a {
	font-family: Verdana, Arial;
     color: #000000;
     text-decoration: none;
     background-color: #EEEEEE;
}
-->
</style>

<script type=text/javascript>
 function save(sav)
 {
  document.getElementsByName('peter')[0].value = sav;
 }
 function CChange(name)
 {
  id = name;
  document.getElementById(id).style.color = #FFFFFF; /* farbe des letzten inks */
  document.getElementById(id).style.backgroundColor = #AA00AA; /* Hintergrundfarbe des letzten inks */
  save(id);
 }
 function load(id)
 {
  vall = document.getElementsByName('peter')[0].value;
  document.getElementById(vall).style.color = #000000; /* normale link-farbe */
  document.getElementById(vall).style.backgroundColor = #EEEEEE; /* normale link-Hintergrundfarbe */
  CChange(id);
 }

  function red()
  {
   document.getElementById('link1').style.color = #FFFFFF;
   document.getElementById('link1').style.backgroundColor = #AA00AA;

   document.getElementById('link4').style.color = #FFFFFF;
   document.getElementById('link4').style.backgroundColor = #AA00AA;

   document.getElementById('link7').style.color = #FFFFFF;
   document.getElementById('link7').style.backgroundColor = #AA00AA;
  }
</script>

</head>

<body onload=javascript:red()>


<input type=hidden name=peter value=link1>

<a href=# onclick=javascript:load(this.id) id=link1>bla 1</a>
<br><br>
<a href=# onclick=javascript:load(this.id) id=link2>blö 1</a>
<br><br>
<a href=# onclick=javascript:load(this.id) id=link3>blub 1</a>


<br><br><br><br><br>


<a href=# onclick=javascript:load(this.id) id=link4>bla 2</a>
<br><br>
<a href=# onclick=javascript:load(this.id) id=link5>blö 2</a>
<br><br>
<a href=# onclick=javascript:load(this.id) id=link6>blub 2</a>


<br><br><br><br><br>


<a href=# onclick=javascript:load(this.id) id=link7>bla 3</a>
<br><br>
<a href=# onclick=javascript:load(this.id) id=link8>blö 3</a>
<br><br>
<a href=# onclick=javascript:load(this.id) id=link9>blub 3</a>

</body>
</html>

* Verschoben aus Anwendungsentwicklung & Scripting *
 
  • #2
Wenn ich das richtig verstanden habe, sollte es so gehen ;)
Code: 
<html>
<head>
<title>Unbenannt</title>

<style type=text/css>
<!--
a {
	font-family: Verdana, Arial;
	text-decoration: none;
}

.diagrammOn {
	color: #FFFFFF;
	background-color: #AA00AA;
}

.diagrammOff {
	color: #000000;
	background-color: #EEEEEE;
}

-->
</style>


<script type=text/javascript>

// Anzahl der Links
var linkCount = 9 

function changeClass(wo) {
	// Alle zurücksetzen
	for(i = 1; i <= linkCount; i++) {
		document.getElementById(link_+i).className = diagrammOff;
	}
	// Ausgewählter Link
	wo.className = diagrammOn;
}

</script>

</head>

<body>


<a href=# class=diagrammOn onclick=changeClass(this) id=link_1>bla 1</a>
<br><br>
<a href=# class=diagrammOff onclick=changeClass(this) id=link_2>blö 1</a>
<br><br>
<a href=# class=diagrammOff onclick=changeClass(this) id=link_3>blub 1</a>


<br><br><br><br><br>


<a href=# class=diagrammOff onclick=changeClass(this) id=link_4>bla 2</a>
<br><br>
<a href=# class=diagrammOff onclick=changeClass(this) id=link_5>blö 2</a>
<br><br>
<a href=# class=diagrammOff onclick=changeClass(this) id=link_6>blub 2</a>


<br><br><br><br><br>


<a href=# class=diagrammOff onclick=changeClass(this) id=link_7>bla 3</a>
<br><br>
<a href=# class=diagrammOff onclick=changeClass(this) id=link_8>blö 3</a>
<br><br>
<a href=# class=diagrammOff onclick=changeClass(this) id=link_9>blub 3</a>

</body>
</html>
 
  • #3
Nein das funktioniert leider nicht. Also nochmal zur verdeutlichung


Ich hab in dem geposteten Beispiel drei Absätze mit á 3 Links. Der erste davon sollte immer rot hinterlegt sein, wies bereits ist.
Die anderen sollten dann rot werden wenn man sie angeklickt hat. Allerdings die drei Absätze voneinander unabhängig. Heißt also wenn ich im ersten garnichts anklicke bleibt der erste rot. Wenn ich danach im zweiten Absatz den link blub 2 anklicke soll dieser rot werden, der erste link im zweiten absatz grau, aber der erste link im ersten Absatz rot bleiben.


Denke so müsste es vom Verständnis her gehen. Ist halt scheiße zu erklären wenn man nichts mit Fingern zeigen kann :D
 
  • #4
Dann halt so ;)
<html>
<head>
<title>Unbenannt</title>

<style type=text/css>
<!--
a {
font-family: Verdana, Arial;
text-decoration: none;
}

.diagrammOn {
color: #FFFFFF;
background-color: #AA00AA;
}

.diagrammOff {
color: #000000;
background-color: #EEEEEE;
}

-->
</style>


<script type=text/javascript>

// Anzahl der Links pro Gruppe
var linkCount = 4

function changeClass(wo, gruppe) {
// Alle Links in der Gruppe zurücksetzen
for(i = 1; i <= linkCount; i++) {
if(document.getElementById(link_+gruppe+_+i))
document.getElementById(link_+gruppe+_+i).className = diagrammOff;
}
// Ausgewählter Link
wo.className = diagrammOn;
}

</script>

</head>

<body>


<a href=# class=diagrammOn onclick=changeClass(this,'a') id=link_a_1>bla 1</a>
<br><br>
<a href=# class=diagrammOff onclick=changeClass(this,'a') id=link_a_2>blö 1</a>
<br><br>
<a href=# class=diagrammOff onclick=javascript:changeClass(this,'a') id=link_a_3>blub 1</a>
<br><br>
<a href=# class=diagrammOff onclick=javascript:changeClass(this,'a') id=link_a_4>blub 1</a>


<br><br><br><br><br>


<a href=# class=diagrammOn onclick=changeClass(this,'b') id=link_b_1>bla 2</a>
<br><br>
<a href=# class=diagrammOff onclick=changeClass(this,'b') id=link_b_2>blö 2</a>
<br><br>
<a href=# class=diagrammOff onclick=changeClass(this,'b') id=link_b_3>blub 2</a>


<br><br><br><br><br>


<a href=# class=diagrammOn onclick=changeClass(this,'c') id=link_c_1>bla 3</a>
<br><br>
<a href=# class=diagrammOff onclick=changeClass(this,'c') id=link_c_2>blö 3</a>
<br><br>
<a href=# class=diagrammOff onclick=changeClass(this,'c') id=link_c_3>blub 3</a>

</body>
</html>
Zum Vergrößern anklicken....
 
  • #5
Alles klar dann danke ich dir vielmals, habs schon umgesetzt und alles funktioniert einwandfrei :)


Da du so der checker bist, habe ich gleich noch eine weitere Arbeit für dich ;-)

Ich wollte bei HMTL-Datei eine Top-Ten-Liste einbauen. Kann aber leider im Internet nichts dazu finden wie man dies bewerkstelligt. Ich hab schonmal so was gefunden, also wie man Text auf einer HTML-Seite hinzufügt, bei Self-HTML. Hab mir aber sagen lassen, dass man soetwas nur mit PHP / Perl usw. umsetzen kann.
BTW: vielleicht weiß einer was ich mein auf Self-HTML würd mich nämlich interessieren was man da rein mit HTML so machen kann.


-Es sollte folgendermaßen aussehen:

Die 10 Besten sollte es mit ihrem angegebenen Namen und der Zeit anzeigen. Hat man eine schlechtere Zeit als der 10te sollte einfach die Meldung wie bisher kommen.
Ist man aber besser, sollte ein Pop-up mit Eintragsmöglichkeit für den Namen erscheinen, welchen es dann mit der dazugehörigen Zeit in die Top-Ten-Liste einträgt.

-Wie mache ich das??


Wäre echt super wenn mir da jemand weiterhelfen könnte!
 
  • #6
Nimm dir einfach nen Free-Webspace der PHP & MySQL anbietet.
Dort kannste dann das Geraffel ;) in der Datenbank speichern.
Zur Ausgabe der Top-10 erstellst du ein kleines PHP-Script.

Das ganze kannste dann per IFrame in deine Arcor-Homepage einbinden :1

PS:
Mit reinem HTML und evtl. JavaScript bekommste das eh nicht geregelt ;)

eselhund schrieb:
also wie man Text auf einer HTML-Seite hinzufügt, bei Self-HTML.
Zum Vergrößern anklicken....

Das ist kein Problem, aber nach dem nächsten Reload der Seite isses wieder weg ;)
 
  • #7
Na dann tortzdem vielen dank, aber das wollte ich nicht...
 
Thema:

Klassenerweiterung eines Java-Script

ANGEBOTE & SPONSOREN

Neueste Themen

Statistik des Forums

Themen
113.840
Beiträge
707.963
Mitglieder
51.494
Neuestes Mitglied
Flensburg45
Oben