target="_blank" für Button Obere Leiste

27.02.2008 21:27 (zuletzt bearbeitet: 27.02.2008 21:32)

Riddick
#1 target="_blank" für Button Obere Leiste

Ich habe zauberhafte Button mit wechselndem Hintergrund bei mouseover (auf Anregung von Usern hier im Support) in meinem Forum eingebaut.

Nun habe ich einen zusätzlichen Button >>Bilder-Upload<<. Dieser soll, wenn möglich, in einem neuen Fenster geöffnet werden. Ich habe schon hin und her versucht, bekomme es aber einfach nicht hin.

Ist es überhaupt möglich und wenn ja.... Bitte HILFE...

Hier der Code meines Button:

 <INPUT class="tmenu" TYPE="button" VALUE="Bilder-Upload"
onmouseover="this.style.color='#ffff00';this.style.cursor='pointer';this.style.backgroundImage='URL(http://s6.directupload.net/images/user/071025/f9uzvme3.jpg)';"
onmouseout="this.style.color='#EBEFF1';this.style.backgroundImage='URL(http://s6.directupload.net/images/user/071025/zvcx9jzs.jpg)';"
onClick="parent.location='http://www.img-box.de/';">

Antworten

Beitrag melden

#2

27.02.2008 23:06

Vitalis
#2 RE: target="_blank" für Button Obere Leiste

Vitalis

Hallo Riddick

Also normalerweise setzt man keine Input-Felder (bzw. Button) als Rollover-Element ein, sondern eigentlich normale Bilder. Es empfiehlt sich etwas anders Vorzugehen:

1.) Bild benutzen
2.) Standardgemäßen JS benutzen, welcher auch wirklich in allen Browsern funktioniert.
3.) diese Funktion ausgliedern, damit zb. diese Funktion mehrmals verwendet werden kann, ohne so extrem oft die gleiche Funktion aufzurufen.

Ein Beispiel wäre zb so:

<a href="http://www.bilder-hochladen.net/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bilderhochladen_01','','http://s6.directupload.net/images/user/071025/f9uzvme3.jpg',0)" target="_blank"><img src="http://s6.directupload.net/images/user/071025/zvcx9jzs.jpg" alt="Bilder-Upload" name="bilderhochladen_01" width="144" height="26" border="0"></a>

und der Dazugehörige JS-Code, welcher in den Header gehört:

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  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 && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Dennoch rate ich Ihnen davon generell ab, Js in diesen einfachen Situationen zu benutzen, denn nicht jeder hat JS Aktiviert. Stattdessen wären Sie mit Mouseover-Effekten mithilfe von CSS besser dran:

<a class="bilder_upload_link" href="http://www.bilder-hochladen.net/" target="_blank">Bilder-Upload</a>

die dazugehörige CSS, welche Sie ebenfalls in die Header schreiben müssen:

<style type="text/css">
	a.bilder_upload_link
	{
		background: #ffffff url('http://s6.directupload.net/images/user/071025/f9uzvme3.jpg');
		width:144px;
		height:26px;
	}
	
	a:hover.bilder_upload_link
	{
		background: #ffffff url('http://s6.directupload.net/images/user/071025/zvcx9jzs.jpg');
		width:144px;
		height:26px;
	}
</style>

oä. da Sie da vollkommen freie Hand haben, *g*
Ist nur eine kleine Empfehlung von mir

Antworten

Beitrag melden

#3

28.02.2008 11:53 (zuletzt bearbeitet: 28.02.2008 11:54)

Riddick
#3 RE: target="_blank" für Button Obere Leiste

Riddick

Danke schön...
Die Button-Version, welche ich eingebaut habe, habe ich, wie schon gesagt, hier im Support gefunden...
Ich werde mich am WE daran machen und die CSS-Version "versuchen".

Gruß Kathi