Linkkarussel

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Linkkarussel

Beitrag von Hape »

Hier der CSS-Abschnitt:

Code: Alles auswählen

<!-- S-T-A-R-T  O-F  C-O-D-E  F-O-R  M-E-S-S-A-G-E  C-A-R-O-U-S-E-L -->

<!-- START OF STYLE-CONFIGURATION ZONE  -->
<!-- CONFIGURE  a.textstyle AND a.textstyle:hover AND a.textstyle:hover -->
<!-- DO NOT CHANGE .boxstyle -->

<style>

a.textstyle {
font-family:Arial;
font-size:10pt;
font-weight:normal;
font-style:normal;
color:blue;
text-decoration:none;
background-color:white;
padding:4px;
}

a.textstyle:visited {
color:blue;
}

a.textstyle:hover {
color:red;
text-decoration:none;
background-color:black;
color:white;
}

.boxstyle {
position:absolute;
visibility:visible;
}
</style>
<!-- END OF STYLE-CONFIGURATION ZONE  -->
Hier das Script:

Code: Alles auswählen

<script>
// CREDITS:
// Magic Carousel Ticker
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

var rotatingtext=new Array()
var rotatinglink=new Array()

///////////////////////////////////////////////////////////////////////////////////////
// START OF SCRIPT-CONFIGURATION ZONE 
//////////////////////////////////////////////////////////////////////////////////////

// Your messages. Add as many as you like
rotatingtext[0]="imagine"
rotatingtext[1]="there's no heaven"
rotatingtext[2]="it's easy"
rotatingtext[3]="if you try"
rotatingtext[4]="no hell below us"
rotatingtext[5]="above us only sky"
rotatingtext[6]="imagine"
rotatingtext[7]="all the people"
rotatingtext[8]="living for today"
rotatingtext[9]="imagine"
rotatingtext[10]="there's"
rotatingtext[11]="no countries"
rotatingtext[12]="It isn't hard"
rotatingtext[13]="to do"
rotatingtext[14]="nothing to kill"
rotatingtext[15]="or die for"
rotatingtext[16]="and"
rotatingtext[17]="no religion too"
rotatingtext[18]="imagine"
rotatingtext[19]="all the people"
rotatingtext[20]="living life"
rotatingtext[21]="in peace"

// The links corresponding to the messages above. 
// Each message has a link of its own
// If no link is reqired add "#" instead of a URL (see smaple below)

rotatinglink[0]="http://www.hotscripts.com"
rotatinglink[1]="http://www.scripts.com"
rotatinglink[2]="http://www.google.com"
rotatinglink[3]="http://www.fabulant.com"
rotatinglink[4]="http://www.dynamicdrive.com"
rotatinglink[5]="http://www.hotscripts.com"
rotatinglink[6]="http://www.hotscripts.com"
rotatinglink[7]="http://www.hotscripts.com"
rotatinglink[8]="#"
rotatinglink[9]="#"
rotatinglink[10]="#"
rotatinglink[11]="http://www.hotscripts.com"
rotatinglink[12]="http://www.hotscripts.com"
rotatinglink[13]="http://www.hotscripts.com"
rotatinglink[14]="http://www.hotscripts.com"
rotatinglink[15]="http://www.hotscripts.com"
rotatinglink[16]="http://www.hotscripts.com"
rotatinglink[17]="http://www.hotscripts.com"
rotatinglink[18]="http://www.hotscripts.com"
rotatinglink[19]="http://www.hotscripts.com"
rotatinglink[20]="http://www.hotscripts.com"
rotatinglink[21]="ihttp://www.hotscripts.com"

// Set the width of the inner-circle (pixels)
var textwidth=330

// Set the height of the inner-circle (pixels)
var textheight=120

// Set the number of words that will be displayed at once
var displaymax=9

// Set the speed! Tha values may range from 0.1 to 1.0
var step = 0.02;

/////////////////////////////////////////////////////////////////////////////////////
// END OF SCRIPT-CONFIGURATION ZONE
// Do not edit below
////////////////////////////////////////////////////////////////////////////////////

var maxopacity=new Array()
var i_wordcounter=0
var segment=360/(displaymax);
var tmr
var decrement=0;
textwidth=textwidth/2
textheight=textheight/2
var opacitystep=Math.round(100/textheight)
var spc="\&"+"nbsp;"

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0

for (i=0;i<rotatingtext.length;i++) {
  rotatingtext[i]=rotatingtext[i].replace(/[" "]/g,spc)
}

for (i=0;i<displaymax;i++) {
  maxopacity[i]=1
}

function getpagesize() {
  windowwidth=parseInt(document.body.clientWidth)
  windowheight=parseInt(document.body.clientHeight)
  twidth=Math.floor(textwidth)
  theight=Math.floor(textheight)
  rotatetext()
}

function rotatetext() {
  for (i=0; i<displaymax; i++) {
    var thisspan=eval("document.getElementById('span"+i+"').style")
    thisspan.left=twidth*Math.sin(decrement+i*segment*Math.PI/180)+textwidth;
    thisspan.top=theight*Math.cos(decrement+i*segment*Math.PI/180)+textheight;
    thisspan.zIndex=parseInt(thisspan.top)
    
    var op=parseInt(100/textheight*(parseInt(thisspan.top)*0.5))
    
    if (op<5 && maxopacity[i]==1) {
      if (i_wordcounter>=rotatingtext.length) {
        i_wordcounter=0
      }
      document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_wordcounter]+"' class='textstyle' onMouseover='stoprotating(this)' onMouseout='restartrotating()'>"+rotatingtext[i_wordcounter]+"</a>"
      maxopacity[i]=-1
      i_wordcounter++
    }
    if (op>90) {
      maxopacity[i]=1
    }
    var thisfilter=eval("span"+i)
    
    if (ie) {
      thisfilter.filters.alpha.opacity=op
    }
    else {
      thisspan.opacity=op/100
    }
  }
  decrement-=step;
  tmr=setTimeout('rotatetext()', 20);
}

function stoprotating(thisobj) {
  clearTimeout(tmr)
  zoomobj=thisobj
}

function restartrotating() {
  rotatetext()
}
document.write('<div id="roof" style="position:relative;width:'+(2*textwidth)+'px;height:'+(2*textheight)+'px;">');
for (i=0;i<displaymax;i++) {
  document.write('<div id="span'+i+'" class="boxstyle" style="filter:alpha(opacity=100);opacity:1"></div>');
}
document.write('</div>');
window.onload=getpagesize;
</script>
<!-- E-N-D  O-F  C-O-D-E  F-O-R  M-E-S-S-A-G-E  C-A-R-O-U-S-E-L -->
Demoseite: https://hapes-javascript-demo-page.hpag ... ussel.html

Antworten