صورتي الإقتباس

[dev11]

كيف يمكن وضع الصور في الكود التالي تلقائياً عند وضع وسم blockquote عن طريق css ؟

<blockquote dir="rtl"><img src="quote1.gif" alt="" align="right" />نص مقتبس ..<img src="quote2.gif" alt="" />
</blockquote>

[محمد الثقفي]

جرب التالي :


كود css

.quote{
  margin:15px 10px;
  background: url('quote1.gif') top right no-repeat;
  padding-right:25px;
}
blockquote.bq{
  direction: rtl;
  border-right:3px solid #ccc; 
  margin:0px;
  padding:0px 5px;
}

كود html

<div class="quote">   
  <blockquote class="bq">نص مقتبس .. <img src="quote2.gif" alt="" />
  <div>الاقتباس ضعه هنا</div>
  </blockquote>
</div>

[dev11]

حسناً .. ما أريده هو أن يتم وضع الصور عن طريق الـ css أي أنني لا أريد إضافتها يدوياً .. ، وأيضاً بدون زيادة وسوم أخرى أي .. وسم الـ blockquote فقط

[owner]

blockquote{
margin:15px 10px;
background: url('quote1.gif') top right no-repeat;
padding-right:25px;
}

هذا الكود سوف يقوم بجعل اي اقتباس بهذه المواصفات

[dev11]

ماذا عن الصورة الثانية ؟

[Flasher]

حسناً .. ما أريده هو أن يتم وضع الصور عن طريق الـ css أي أنني لا أريد إضافتها يدوياً .. ، وأيضاً بدون زيادة وسوم أخرى أي .. وسم الـ blockquote فقط

اذا كنت تريد التاثير باستخدام فقط blockquote
لابد من استخدام الجافاسكربت لان ادخال صورتين على عنصر غير ممكن بل لابد ان يكونو عنصرين داخل بعض..
الكود عبارة عن اضافة لكود الاخ محمد والاخ صادق
الفكرة في استبدال كل blockquote وادخال فيه عنصر جديد..

<style type="text/css">
blockquote {
	background: url(quote1.gif) top right no-repeat;
	padding-right:25px;
	

}

blockquote div.innerQuote {
	background: url(quote2.gif) top left no-repeat;
	padding-left:25px;

}
</style>

<script type="text/javascript">
// <!--
window.onload = myOnLoad;
function myOnLoad() {
	var blockQuotes = document.getElementsByTagName("blockquote");
	for(var i = 0; i < blockQuotes.length; i++) {
		blockQuotes[i].innerHTML =  '<div class="innerQuote">' + blockQuotes[i].innerHTML + '</div>';
	}

}
// -->
</script>

<blockquote>TEXT</blockquote>
<blockquote>TEXT2</blockquote>

او بدون جافا سكربت (وهذا ما افضله)
<blockquote><div class="innerQuote">TEXT</div></blockquote>

[dev11]

رائع أستاذي flasher .. فعلاً الـ javascript يمكنها القيام بهذه العملية .. لا أعلم لماذا لم أفكر بذلك مسبقاً .. لكن مع ذلك سألتزم بإستخدام الـ css فقط ، شكراً لك