Wie iframe adressieren?

Burnie08 · 19 März 2010

Hi, bin blutiger Anfänger.
Habe ein fertiges Script für ein Bilderkarussel gefunden, das ich auch soweit ganz gut auf meine Bedürfnisse anpassen konnte.
Leider gelingt es mir nicht, die Links in einem iframe zu starten, es wird immer ein neues Fenster geöffnet.
Bevor ich das Script nun demoliere bitte ich um Hilfe, wo die iframe-Zuweisung rein muss.
Mein iframe heißt übrigens ifrm1.
Vielen Dank schon mal im Voraus,
Hubert

Hier das Script:

<script type='text/javascript'>

function carousel(params){
if(!(params.width>0 && isFinite(params.width)))params.width=100;
if(!(params.height>0 && isFinite(params.height)))params.height=100;
if(!(params.sides>2 && isFinite(params.sides)))params.sides=4;
if(!(params.steps>0 && params.steps<100 && isFinite(params.steps)))params.steps=20;
if(!(params.speed>0 && isFinite(params.speed)))params.speed=8;
if(!(params.image_border_width>=0 && isFinite(params.image_border_width)))params.image_ border_width=0;
if(isFinite(params.id)||!params.id)params.id='bad_ id_given_'+Math.random();

document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_'))
cdiv.style.width=params.width+'px';
cdiv.style.height=params.height+'px';
cdiv.style.border=params.border;
cdiv.style.position='relative';
cdiv.style.overflow='hidden';
cdiv.title=params.id;

var counter=0,spinning=true,interval=Math.floor(60000/ params.sides/params.steps/params.speed)-5;
interval=isNaN(interval)?200:interval;
var img_position=[],images=[],img_dimension=[];
var img_index=params.images.length+1,img_index_cap=2*p arams.images.length;
var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, faraway;

function init(){
if(params.direction=="left" || params.direction=="right"){
direction=params.direction;
dimension="width";
}
else if(params.direction=="top" || params.direction=="bottom"){
direction=params.direction;
dimension="height";
}
else {
direction="left";
dimension="width";
}
faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';
cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';
var img=new Image();
img.style.position='absolute';
img.style[direction]=faraway;
img.style.width=params.width-2*params.image_border_width+'px';
img.style.height=params.height-2*params.image_border_width+'px';
img.style.border=(params.image_border_width||0)+'p x solid '+params.image_border_color;

for(var i=0;i<params.images.length;i++){
images=img.cloneNode(true);
images.src=params.images;
if(params.links && params.links && params.links!=''){
targ=params.lnk_targets && params.lnk_targets||params.lnk_base||'new';
if(targ=="_blank"){
attr=(params.lnk_attr && params.lnk_attr)?",'"+params.lnk_attr+"'":"";
images.onclick=new Function("window.open('"+params.links+"','"+targ+"'"+attr+")");
}
else if(targ.substr(0,1)=="_"){
images.onclick=new Function(targ.substr(1)+".location='"+params.links+"'");
}
else{
attr=(params.lnk_attr && params.lnk_attr)?",'"+params.lnk_attr+"'":"";
images.onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links+"',t"+attr+");window[t].focus()");
}
images.style.cursor=document.all?'hand':'pointer';
}

if(params.titles && params.titles && params.titles!='')
images.title=params.titles;
if(document.all)
images.alt=images.title;
images[i+params.images.length]=images;
if(params.images.length==faces)
images[i+2*params.images.length]=images;
cdiv.appendChild(images);
}

var face_size=params.size_mode=='image'?params[dimension]arams[dimension]*Math.sin( Math.PI/params.sides);
var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
var pi_piece=2*Math.PI/params.steps/params.sides;
for(i=0;i<=params.steps*faces;i++){
img_dimension=face_size*Math.sin(pi_piece*i);
img_position=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension/2)+'px':faraway;
img_dimension=img_dimension-2*params.image_border_width>1?Math.ceil(img_dimens ion)-2*params.image_border_width+'px':'1px';
}
}
init();

cdiv.rotate = function(){
setTimeout('document.getElementById("'+cdiv.id+'") .rotate()',interval);
if(!spinning) return;
if(++counter>=params.steps){
counter=0;
if(++img_index>=img_index_cap)
img_index=params.images.length;
}
images[img_index-faces].style[direction]=faraway;
for(var i=faces-1;i>=0;i--){
images[img_index-i].style[direction]=img_position[counter+i*params.steps];
images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
}
}
cdiv.onmouseover=function(){
spinning=false;
}
cdiv.onmouseout=function(){
spinning=true;
}
setTimeout('document.getElementById("'+cdiv.id+'") .rotate()',100);
}
</script>

<meta name="GENERATOR" content="Namo WebEditor">
<meta name="author" content="© H.Uhl 2009">

<body>

<p> </p>

<td width="523" height="114" bgcolor="#DEDEDE">
<p> </p>

<script type='text/javascript'>
carousel({id:'Witti-GmbH', //Enter arbitrary but unique ID of this slideshow instance
border:'',
size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below.
width:180, //Enter width of image or entire carousel, depending on above value
height:125, //Enter height of image or entire carousel, depending on above value
sides:6, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best
steps:23, //# of animation steps. More = smoother, but more CPU intensive
speed:4, //Speed of slideshow. Larger = faster.
direction:'left', //Direction of slideshow. Enter "top", "bottom", "left", or "right"
images:['http://www.wittigmbh.de/images/aussenputz1.jpg',
'http://www.wittigmbh.de/images/lehm1.jpg',
'http://www.wittigmbh.de/images/trockenbau1.jpg',
'http://www.wittigmbh.de/images/altersheim-tb.jpg',
'http://www.wittigmbh.de/images/IMG_0832-tb.jpg'],

links: ['Witti-GmbH Detailansicht',
'Witti-GmbH Detailansicht',
'Witti-GmbH Detailansicht',
'Witti-GmbH Detailansicht',
'Witti-GmbH Detailansicht'],

titles:['Aussen',
'Lehm',
'Trockenbau',
'Dämmung',
'Spachtel'],

image_border_width:0,
image_border_color:'blue'
});

</script>

Gilles · 19 März 2010

Vielelicht schon selbst bemerkt. Das script ist so groß und unlesbar ^^
Deswegen bitte das lesen:
Wie verwende ich Code-Tags im Forum?

Burnie08 · 19 März 2010

So besser?

Hallo Gilles,

ich bin mir nicht sicher, ob ich das richtig verstanden habe.
Daher versuche ich, das Problem nochmal zu spezifizieren:

Ich habe ein Javascript (Bilderkarussell), in dem u.a. die einzelnen Bilder verlinkt sind, also mit Klick auf das jeweilige Bild soll eine html-Datei angesprochen werden.
Diese soll sich in einem iframe öffnen.
Normalerweise mache ich das mit html mit dem Befehlt "target", der hier aber nicht funktioniert.
Da ich mich mit JS nicht so auskenne, erhoffe ich mir eine Hilfestellung dazu, wo bzw. wie ich den Hyperlink auf meinen iframe setzen kann.
Ganz im unteren Teil des JS sind die Links spezifiert
links: ['Witti GmbH',
'Witti GmbH',
'Witti GmbH',
'Witti GmbH',
'Witti GmbH'],
, aktuell nur auf die HP selbst, da sich momentan immer ein neues Fenster öffnet, was ich ja mit dem iframe vermeiden will.

Gruß

Hier nochmal das Script in der hoffentlich jetzt korrekten Form.

HTML:

<script type='text/javascript'>



function carousel(params){
  if(!(params.width>0 && isFinite(params.width)))params.width=100;
  if(!(params.height>0 && isFinite(params.height)))params.height=100;
  if(!(params.sides>2 && isFinite(params.sides)))params.sides=4;
  if(!(params.steps>0 && params.steps<100 && isFinite(params.steps)))params.steps=20;
  if(!(params.speed>0 && isFinite(params.speed)))params.speed=8;
  if(!(params.image_border_width>=0 && isFinite(params.image_border_width)))params.image_border_width=0;
  if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();
  
  document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
  var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_'))
  cdiv.style.width=params.width+'px';
  cdiv.style.height=params.height+'px';
  cdiv.style.border=params.border;
  cdiv.style.position='relative';
  cdiv.style.overflow='hidden';
  cdiv.title=params.id;
    
  var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;
  interval=isNaN(interval)?200:interval;
  var img_position=[],images=[],img_dimension=[];
  var img_index=params.images.length+1,img_index_cap=2*params.images.length;
  var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, faraway;

  function init(){
    if(params.direction=="left" || params.direction=="right"){
      direction=params.direction;
      dimension="width";
      }
    else if(params.direction=="top" || params.direction=="bottom"){
      direction=params.direction;
      dimension="height";
      }
    else {
      direction="left";
      dimension="width";
      }      
    faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';
    cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';
    var img=new Image();
    img.style.position='absolute';
    img.style[direction]=faraway;
    img.style.width=params.width-2*params.image_border_width+'px';
    img.style.height=params.height-2*params.image_border_width+'px';
    img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color;
  
    for(var i=0;i<params.images.length;i++){
      images[i]=img.cloneNode(true);
      images[i].src=params.images[i];
      if(params.links && params.links[i] && params.links[i]!=''){
        targ=params.lnk_targets && params.lnk_targets[i]||params.lnk_base||'new';
        if(targ=="_blank"){
          attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
          images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");
          }
        else if(targ.substr(0,1)=="_"){
          images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'");
          }
        else{
          attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
          images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");
          }
        images[i].style.cursor=document.all?'hand':'pointer';
        }

      if(params.titles && params.titles[i] && params.titles[i]!='')
        images[i].title=params.titles[i];
      if(document.all)
        images[i].alt=images[i].title;
      images[i+params.images.length]=images[i];
      if(params.images.length==faces)
        images[i+2*params.images.length]=images[i];
      cdiv.appendChild(images[i]);
      }
  
    var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);
    var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
    var pi_piece=2*Math.PI/params.steps/params.sides;
    for(i=0;i<=params.steps*faces;i++){
      img_dimension[i]=face_size*Math.sin(pi_piece*i);
      img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway;
      img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';
      }
    }
  init();

  cdiv.rotate = function(){
    setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);
    if(!spinning) return;
    if(++counter>=params.steps){
      counter=0;
      if(++img_index>=img_index_cap)
        img_index=params.images.length;
      }
    images[img_index-faces].style[direction]=faraway;
    for(var i=faces-1;i>=0;i--){
      images[img_index-i].style[direction]=img_position[counter+i*params.steps];
      images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
      }
    }
  cdiv.onmouseover=function(){
    spinning=false;
    }
  cdiv.onmouseout=function(){
    spinning=true;
    }
  setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100);
  }
</script>



<meta name="GENERATOR" content="Namo WebEditor">
<meta name="author" content="© H.Uhl 2009">

<body>


            <p>&nbsp;</p>
            

    <td width="486" height="114" bgcolor="#DEDEDE">
            <p>&nbsp;</p>
            
            <script type='text/javascript'>
carousel({id:'Witti-GmbH', //Enter arbitrary but unique ID of this slideshow instance
          border:'',
          size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below.
          width:180, //Enter width of image or entire carousel, depending on above value
          height:125, //Enter height of image or entire carousel, depending on above value
          sides:6, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best
          steps:23, //# of animation steps. More = smoother, but more CPU intensive
          speed:4, //Speed of slideshow. Larger = faster.
          direction:'left', //Direction of slideshow. Enter "top", "bottom", "left", or "right"
          images:['http://www.wittigmbh.de/images/aussenputz1.jpg',
                  'http://www.wittigmbh.de/images/lehm1.jpg',
                  'http://www.wittigmbh.de/images/trockenbau1.jpg',
                  'http://www.wittigmbh.de/images/altersheim-tb.jpg',
                  'http://www.wittigmbh.de/images/IMG_0832-tb.jpg'], 
        
          links: ['http://www.wittigmbh.de', 
                  'http://www.wittigmbh.de',
                  'http://www.wittigmbh.de',
                  'http://www.wittigmbh.de',
                  'http://www.wittigmbh.de'],
                  
          titles:['Aussenputz',
                  'Lehmputz',
                  'Trockenbau',
                  'Aussenputz auf Dämmung',
                  'Renovierspachtel'],
                  
          image_border_width:0,
          image_border_color:'blue'
          });

            </script>

Wie iframe adressieren?

Burnie08

Neues Mitglied

Gilles

Blogger

Burnie08

Neues Mitglied

Neueste Beiträge