1. Tudásbázis
  2. Egyéb
  3. Header váltás színsémák alapján

Header váltás színsémák alapján

Beküldte Wathfea - 2008. december 28. 17.13
Wathfea képe

Szerbusztok!

A kérdésem a www.drhungary.com weblapon jelenleg fellehető sminkkel kapcsolatos. A smink neve Four Seasons. A sminkben van egy beépített javascript mely arra szolgál, hogy a látogató egyszerűen tud a lap bal felső sarkában látható gombokkal színsémát váltani. Azt a kérést kaptam, hogy ezt módosítsam annyival, hogy a fejléc kép is változzon a különböző színsémák alapján. Sajnos a javascript nem túlzottan a területem. Sikerült pár dolgot kibogarásznom a kódból és megpróbáltam a kódot átírni. Bevezettem egy head változót mely a fejléc kép elérhetőségét tárolja, majd ezt adom értékül a background-image-nek, de valamiért még képet továbbra se hajlandó cserélni a lapon. Ha valakinek van ötlete és tudna segíteni nagyon hálás volnék.

A template.php file egy részlete:

function fourseasons_adminwidget($scripts) {
 
  if (empty($scripts)) { 
    echo "
    <script type=\"text/javascript\" src=\"'.base_path().'misc/jquery.js\"></script>";
  }
 
  echo "
    <script type=\"text/javascript\">
 
    function toggle_style(color,head) {
      $(\"#header-image\").css(\"background-image\", \"url('\" + head + \"')\");
      $(\"h1\").css(\"color\", color);
      $(\"h2\").css(\"color\", color);
      $(\"h3\").css(\"color\", color);
      $(\"#headline a\").css(\"color\", color);
    }
    </script>
 
 
 
    <div id=\"farben\">
      <span>try another color: </span>
      <a href=\"#\" style=\"background-color:#FF9900;\" onclick=\"toggle_style('#FF9900', 'img/orange.png');\"></a>
      <a href=\"#\" style=\"background-color:#003366;\" onclick=\"toggle_style('#003366', 'img/blue.png');\"></a>
      <a href=\"#\" style=\"background-color:#990000;\" onclick=\"toggle_style('#990000', 'img/red.png');\"></a>
      <a href=\"#\" style=\"background-color:#CCCCCC;\" onclick=\"toggle_style('#CCCCCC', 'img/grey.png');\"></a>
      <a href=\"#\" style=\"background-color:#006699;\" onclick=\"toggle_style('#006699', 'img/lightblue.png');\"></a>
      <a href=\"#\" style=\"background-color:#000000;\" onclick=\"toggle_style('#000000', 'img/black.png');\"></a>
    </div>
 
    <div id=\"font\">
      <span style=\"margin-left:20px;\">try another fontsize: </span>    
      <a href=\"#\" onclick=\"$('body').css('font-size','60%');\">60%</a>
      <a href=\"#\" onclick=\"$('body').css('font-size','70%');\">70%</a>
      <a href=\"#\" onclick=\"$('body').css('font-size','80%');\">80%</a>
      <a href=\"#\" onclick=\"$('body').css('font-size','90%');\">90%</a>
    </div>
  ";                                                                                          
 
}

Perlusz Dávid

Drupal verzió: 
6.x
Fórum: 
Egyéb
Wathfea képe

Beküldte Wathfea - 2008. december 29. 15.29

Végül más megoldással, de sikerült kiküszöbölnöm a problémát. Leírom a kódot ide is, hogy ha valakinek tetszik a megoldás és kellene neki is egy ilyen "rendszer" akkor tudja hasznosítani.

<html>
<head>
	<style>
		h1
		{
		color: red;
		}
		h2 
		{
		color: blue;
		}
		#header
		{
		background-image: url('kep.png');
		height: 100px;
		}
		#font span,
		#farben span 
               {
		font-family:arial; 
		color:#333333; 
		font-size:10px; 
		text-decoration:none; 
		float:left; 
		display:block;
		}
                #farben a 
                {
		width:10px; 
		height:10px; 
		display:block;
		float:left;
		margin-left:5px;
		}
		#font a 
               {
		display:block;
		float:left;
		margin-left:5px;
		font-family:arial;
		color:#cccccc;
		font-size:10px;
		text-decoration:none;
		}
	</style>
 
<!-- A JS ami kikeresi a css-bol selector szerint az atirando bejegyzest -->
 
        <script type="text/javascript">
		function FindStyle(selector) 
                {
		     for (var i=0; i<document.styleSheets.length; i++) 
                     {
			for (var j=0; j<document.styleSheets[i].cssRules.length; j++) 
                        {
			 if (document.styleSheets[i].cssRules[j].selectorText==selector) 
                         {
			   return document.styleSheets[i].cssRules[j];
			 }
			}
		      }
		return null;
		}	
 
		function ChangeStuff(color, imageurl) 
                {
		 var cssstyle;
				cssstyle = FindStyle("h1");
				cssstyle.style.color = color;
 
				cssstyle = FindStyle("#header");
				cssstyle.style.backgroundImage = "url('" + imageurl + "')";
		}
	</script>
 
 
</head>
<body>
 
<div id="header">BLABLABLA</div>
 
<h1>Fejléc</h1>
<h2>Kisebb fejléc</h2>
<p>Stuff</p>
<h1>Második fejezet</h1>
<p>Még több stuff</p>
 
<div id="farben">
<span>Másik színséma: </span>
<a href="#" style="background-color:#FF9900;"onclick="ChangeStuff('#FF9900','kep.png'); return false;"></a>
<a href="#" style="background-color:#003366;"onclick="ChangeStuff('#003366','kep1.png'); return false;"></a>
<a href="#" style="background-color:#990000;" onclick="ChangeStuff('#990000','kep2.png'); return false;"></a>
<a href="#" style="background-color:#cccccc;" onclick="ChangeStuff('#cccccc','kep3.png'); return false;"></a>
<a href="#" style="background-color:#006699;" onclick="ChangeStuff('#006699','kep4.png'); return false;"></a>
<a href="#" style="background-color:#000000;" onclick="ChangeStuff('#000000','kep5.png'); return false;"></a>
</div>
 
</body>
</html>

Egyszerű és jól működik. :) Have fun!

Bye

0
0