Alert-Box erstellen mit Bild

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
biberiusmero

biberiusmero hat kostenlosen Webspace.

13:33, 30.6.2012
Hallo zusammen!

Ich habe gelesen, dass man in javascript mit alert nur ein Bild einfügen kann, wenn man selbst eine alert-Box erstellt!
Leider weiß ich nicht wie das geht! Kann mir da jemand helfen?

LG
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
armitxes

armitxes hat kostenlosen Webspace.

13:39, 30.6.2012
Öhm meinst du ein Icon? Ich habe sowas noch nicht gesehen, wo hast du das denn gesehen/gelesen?

evtl. wenn man ganz eigene Alert Box erstellt

Beitrag zuletzt geändert: 30.6.2012 13:40:13 von armitxes
Autor dieses Themas
biberiusmero

biberiusmero hat kostenlosen Webspace.

13:43, 30.6.2012
Ich habe schon mehrfach irgendwo gelesen, dass man in eine alert-Box ein Bild einbinden kann, aber dass das eben nur geht, wenn man die ganze alert-Box erstellt!

Beitrag zuletzt geändert: 30.6.2012 13:49:22 von biberiusmero
armitxes

armitxes hat kostenlosen Webspace.

13:58, 30.6.2012
Ah okay, für solche Alertboxen gibt es viele Beispiele im Internet. Ich würde eine Alert Box von woanders nehmen, ein gutes Beispiel mit Code findest du hier: http://www.kostenlose-javascripts.de/forum/Hilfe-bei-unseren-Scripts/337-bild-in-alert-oder-hinweis-box.html

ab da musst du nur etwas CSS können. In alertText kommt dann rein was auch immer an Text oder Bildern angezeigt werden soll (normales HTML verwenden)

Beitrag zuletzt geändert: 30.6.2012 14:01:19 von armitxes
Autor dieses Themas
biberiusmero

biberiusmero hat kostenlosen Webspace.

14:03, 30.6.2012
Geht es auch, dass man nur eine Box erstellt und den Inhalt mit if anpasst?
Das würde viel Arbeit ersparen!

ab da musst du nur etwas CSS können. In alertText kommt dann rein was auch immer an Text oder Bildern angezeigt werden soll (normales HTML verwenden)

Mit HTML und CSS kenn ich mich genug aus, denke ich!

Beitrag zuletzt geändert: 30.6.2012 14:04:08 von biberiusmero

14:57, 30.6.2012

Hallo

ich denke damit ist nicht wirklich "alert-Box" gemeint,
sondern ein DIV einblenden, in dem dann das Bild erscheint

... quasi ein ToolTip

<html>
<head>
<title>eigene info-box (alert)</title>

<style type="text/css">
#alert-wrap{
	position:absolute;
	top:90px;
	left:170px;
	width:200px;
	display:none;
	margin:0 auto;
	padding:0;
	background:#eeeeee;
	border: 1px solid #003366;
}

#alert-title{
	with:100%;
	height:26px;
	background:#3366AA;
	margin:0 auto;
	padding:0;
}

#alert-title-text{
	float:left; 
	height:24px;
	margin:0 auto;
	padding:4px 0px 0px 10px;
	color:#EFEFEF;
	font-family:Arial;
	font-size:12px;
	font-weight:bold; 
	text-align:left;
}

#alert-close{
	float:right; 
	margin:0 auto;
	padding:2px 2px 0px 0px;
	background:#FF0000;
	height:22px;
	width:22px;
	color:#FFFFFF; 
	text-align:center;
	font-family:Arial;
	font-size:16px;
	font-weight:bold; 
	cursor:pointer; 
	border-left: 2px solid #FF0000;
	border-bottom: 2px solid #FF0000;
}

#alert-content{
	text-align:center;
	color:#000000; 
	font-family:Arial;
	font-size:12px;
	padding:6px 2px 6px 2px;
}

</style>

<script type="text/javascript">

function writeAlert(wert){
	var tnow = new Date();
	var dstr = tnow.toISOString(); 
	
	var ausgabe = '<img src="bild.gif" width="120" height="90" border="1" /><br />'+wert+'<br />'+dstr+'<br />...';
	
	document.getElementById("alert-text").innerHTML = ausgabe;
	document.getElementById("alert-wrap").style.display = 'block';
}

function closeAlert(){
	document.getElementById("alert-wrap").style.display = 'none';
}

</script>

</head>

<body>

<br />
<br />


<div id="alert-wrap">
	
	<div id="alert-title">
		<span id="alert-title-text">Ich bin der Box Titel</span>
		<div id="alert-close" onclick="closeAlert();">X</div>
	</div>
	
	<div id="alert-content">
		<span id="alert-text">&nbsp;</span>
		<br />
		<input type="button" id="okbtn" value="Ok" onclick="closeAlert();" />
	</div>

</div>

<br />
<br />

<input type="button" id="box1" value="Klick mich!" onclick="writeAlert('123 abc');" />

<br />
<br />

</body>
</html>

je nachdem welchen wert Du in writeAlert() überginst,
kannst Du auch im JS mit if-Bedingung arbeiten

Autor dieses Themas
biberiusmero

biberiusmero hat kostenlosen Webspace.

22:17, 30.6.2012
Hallo!
Danke für die Antwort, rssping.
Aber ist es auch möglich, das Bild variieren zu lassen?
(Ich kenne mich da nicht so aus!)
burgi

Co-Admin

burgi hat kostenlosen Webspace.
22:30, 30.6.2012
Das Bild variierst du, indem du einfach den Pfad änderst:
```
function writeAlert(wert){
.
.
.
	var ausgabe = '<img src="bild.gif" width="120" height="90" border="1" /><br />'+wert+'<br />'+dstr+'<br />...';
.
.
.}
```
Wenn du das öfters benötigen wirst, würde ich das als Variable in die Funktion übernehmen, sodass du beliebige Bilder angeben kannst.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city

Alert-Box erstellen mit Bild

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!