Easier way to modify HTML auction template?

shmokeh

shmokeh

shmokeh

Associate
Joined
12 Sep 2012
Posts
17
So I sell a lot of vinyl at the moment through ebay (only way to get rid off them!)
Ive found a nice template online for my auctions, and did some heavy editing to neaten it up and change it for my use,
Only problem is, it takes a long time to edit each photo and description, and I have to be very carefull not to break the code each time I change it
For example with just the first image I have to manually change each address for the image, and be carefull not to delete mainphotosource or the image breaks (this is just for the first image!)
Code: 
	 	<div id="mainImage">   
			<a href="http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl211_zps419dd2d9.jpg" target="_blank"><img src="http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl211_zps419dd2d9.jpg" width="400" height="300" hspace="0" vspace="0" border="0" align="left" name="mainphoto"></a>
		</div>
	  	<div id="thumbImage">
		  	<!-- image one -->
		   	<a OnMouseOver="mainphoto.src='http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl211_zps419dd2d9.jpg';" OnMouseOut="mainphoto.src='http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl211_zps419dd2d9.jpg';">
	  	<img src="http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl211_zps419dd2d9.jpg" width="80" height="60" hspace="10" vspace="8" border="0" align="left"></a>
Im not brilliant with HTML, I just know the basics, however years ago I use to code a program called scar (very similar to C++ I beleive). There used to be a command where you could insert a variable tag into the start of the script and call it whatever, then put it into the coding, for example if I wanted a tag called "photo1" and had it in the header and coding I would be able to change it much easier.
Im not to good at explaning but I know you can do this for css styling, just wondering if its possible to do the same for the photo sources and description?
Any help would be appreciated as well as any other suggestions on how I can shorten the process of changing the template each time for over 200 vinyl!

Here is my coding:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h2 {
	font-family: "Comic Sans MS", cursive;
	font-size: xx-large;
	font-style: oblique;
	text-align: center;
	font-weight: bold;
}
p {
	text-align: center;
}
#description p {
	text-align: left;
}
</style>
</head>

<body>
<div id="middle">
<div id="container">
  <div id="header">
  	<div id="headBack">
	  	<div id="logo" class="fltlft">
	  	 <h1><img src="http://i1067.photobucket.com/albums/u423/Shmokeh/4c065a59.png" alt="Logo" height="80" width="120" /> </h1>
	  	</div>
	  	<div id="customize" class="fltrt">
	  	<strong>100% Feedback, Reliable Seller, Turqoise Star, Fast Shipping</strong>
        <p align="center"> Happy bidding!</p>
	  	</div>
  	</div>
 </div>
<div id="title">
<!---Title of Auction Here---> Flip &amp; Fill feat Karen P- The Weekend - 12&quot; Vinyl
<!---End here--->

 </div>
  <div id="sidebar1">
  <a name="desc"></a>
    <h3>Description:</h3>
    <div id="description">
    <!---Description below here--->
    
<p>

Flip & Fill are a Manchester, England based electronic dance music duo, consisting of the producers/remixers, DJs Graham Turner and Mark Hall. They are signed to the All Around The World record label.
<P>
In addition to Kelly Llorenna, Karen Parry has also provided vocals for the act, including on their 2002 #3 UK hit, "Shooting Star" and "Discoland".

</p>
<p>

<ul>
<li>A Side 1 - Extended Mix</li>
<li>B Side 1 - Cheeky Tax Remix</li>
</ul>
</p>
<h3>Condition:</h3>
<ul>
<li>Vinyl - VERY GOOD+: The record has obviously been played many times, but displays no major deterioration in sound quality, despite noticeable surface marks and the occasional light scratch.</li>
<li>Inner Sleeve - NEAR MINT: Slight creases but barely noticeable</li>
<li>Sleeve - GOOD: Small creases barely noticeable, also a slight mark where price tag used to be, edge and corners are frayed through normal wear and tear, ripped down spine on one side but still holds vinyl and sleeve.
</li>
</ul>


 	
    <!---Description ends here--->


  	</div>
  </div>
  <div id="mainContent">
     <div id="images">
	 	<div id="mainImage">   
			<a href="http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl211_zps419dd2d9.jpg" target="_blank"><img src="http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl211_zps419dd2d9.jpg" width="400" height="300" hspace="0" vspace="0" border="0" align="left" name="mainphoto"></a>
		</div>
	  	<div id="thumbImage">
		  	<!-- image one -->
		   	<a OnMouseOver="mainphoto.src='http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl211_zps419dd2d9.jpg';" OnMouseOut="mainphoto.src='http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl211_zps419dd2d9.jpg';">
	  	<img src="http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl211_zps419dd2d9.jpg" width="80" height="60" hspace="10" vspace="8" border="0" align="left"></a>
		  	<!-- image two -->
		  	<a OnMouseOver="mainphoto.src='http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl213_zpse2542432.jpg';" OnMouseOut="mainphoto.src='http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl213_zpse2542432.jpg';">
		  	<img src="http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl213_zpse2542432.jpg" width="80" height="60" hspace="10" vspace="8" border="0" align="left"></a>
		  	<!-- image three -->
		  	<a OnMouseOver="mainphoto.src='http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl214_zpsb60c5bf9.jpg';" OnMouseOut="mainphoto.src='http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl214_zpsb60c5bf9.jpg';">
		  	<img src="http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl214_zpsb60c5bf9.jpg" width="80" height="60" hspace="10" vspace="8" border="0" align="left"></a>
		  	<!-- image four -->
		  	<a OnMouseOver="mainphoto.src='http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl212_zps07a387aa.jpg';" OnMouseOut="mainphoto.src='http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl212_zps07a387aa.jpg';">
		  	<img src="http://i1067.photobucket.com/albums/u423/Shmokeh/Vinyl/Vinyl212_zps07a387aa.jpg" width="80" height="60" hspace="10" vspace="8" border="0" align="left"></a>
	    </div>
	   <div style="margin-left:200px; font-size:12px; margin-top:4px; ">Hover To Enlarge</div>  
    </div>
  </div>
	<br class="clearfloat" />
  <div id="sellerInfo">
<div class="accordion">
	<h2>About Me</h2>
	<div class="pane" >
<!-- MANUALLY ADD YOUR ABOUT TEXT BELOW THIS LINE -->
<p>I am a small time seller who lives in Halifax, West Yorkshire.</p>
<p> I have been using eBay for over 6 years. I worked at Butlins for 2 years as a Team Leader on Bar Rosso a Wine and Cocktail Bar.</p>
<p> I am a vinyl DJ and own a pair of Technics 1210's MKII, I have been collecting and selling vinyl since 2010. I mainly speciallise in Drum and Bass and Dance/Trance.<br />
</p>
<p> I strive to deliver the best service possible and will always respond within 24 hours, I aim to send every item within 24 working hours.</p>
<p> If you need any more informatin about my listings or any other enquiries feel free to contact me via eBay or via email.</p>
<!-- MANUALLY ADD YOUR ABOUT TEXT ABOVE THIS LINE -->
	</div>
	<h2 align="center">Shipping</h2>
	<div class="pane">
<!-- MANUALLY ADD YOUR TERMS TEXT BELOW THIS LINE -->
<p>Items will usually be sent within 1 working day unless under extreme circumstance. </p>
<p>Unfortunatly I cannot post items on a Sataday as our local post office is shut unless under special circumstance in which case please contact me. </p>
<p>Items will be packaged in a standard 12 inch vinyl mailer, complete with record stiffener to ensure items reach you in optimal condition.</p>
<p><img src="http://i1067.photobucket.com/albums/u423/Shmokeh/IMG_1706_zps0028bd19.jpg" alt="Packaging" height="100" width="200"/></p>
	</div>
	<h2>Multiple Vinyl Discount</h2>
	<div class="pane">
<p> Multiple items, upon request can be sent together for a reduced P+P charge which are as follows:</p>
<ul>
<li> £1.15 Per addition vinyl in the UK Mainland </li>
<li> £2.00 Per addition vinyl to Europe </li>
<li> £2.50 Per addition vinyl rest of world</li></p>
</ul>
<!-- MANUALLY ADD YOUR TERMS TEXT ABOVE THIS LINE -->
	</div>
	<h2>Payment</h2>
	<div class="pane">
<!-- MANUALLY ADD YOUR PAYMENT TEXT BELOW THIS LINE -->
<p>Payment via Paypal only unless otherwise stated in auction.</p>
<p>If local pickup is available payment will be via cash on delivery</p>
<!-- MANUALLY ADD YOUR PAYMENT TEXT ABOVE THIS LINE -->
	</div>
	<h2>Contact Us</h2>
	<div class="pane">
<!-- MANUALLY ADD YOUR CONTACT TEXT BELOW THIS LINE -->
<p>Please feel free to contact me about any enquiries via ebay for a quick response as these are sent straight to my phone</p>
<p>You can also contact me via email: [email protected]</p>
<!-- MANUALLY ADD YOUR CONTACT TEXT ABOVE THIS LINE -->

	</div>
	
	

</div>
	 
	 <!-- THIS IS THE END OF THE ACCORDIAN -->
  </div>
	<br class="clearfloat"/>
  <div id="footer">
  	<div id="footerLink">
    	<a href="http://www.ebayappreview.com"/>eBay Templates</a>
    </div>
    <div id="footNav">
        <a href="#desc">Description</a>
        <a href="#about">About Us</a>
        <a href="#terms">Shipping</a>
        <a href="#contact">Contact</a>
    </div>
  </div>
</div>
</div>


<div id="cssParent">
            <div id="css">
                <link rel=StyleSheet href="http://www.ebayappreview.com/templates/web2/css/allStyle.css" type="text/css" media=screen>
<link rel=StyleSheet href="http://www.ebayappreview.com/templates/web2/css/Darkblue.css" type="text/css" media=screen>
            </div>
        </div>
        <script type="text/javascript">
var linkBack = document.getElementById('footerLink');
var addStyle = false;

if(linkBack.innerHTML.trim() == '<a href="http://www.ebayappreview.com">eBay Template</a> found at eBay App Review'){
        addStyle = true;

}
parent = document.getElementById('cssParent');
css = document.getElementById('css');
parent.removeChild(css);
</script>
        <script type ="text/javascript">
        if(addStyle){
            document.write('\
                            <link rel=StyleSheet href="http://www.ebayappreview.com/templates/web2/css/allStyle.css" type="text/css" media=screen>\n\
<link rel=StyleSheet href="http://www.ebayappreview.com/templates/web2/css/Darkblue.css" type="text/css" media=screen>\n\
                    \n\
                    ');
        }
    </script>
</body>
</html>
 
Possible with Javascript. Basically give the <img> an ID and then you can have a variable for example "thumbnailImage" which you change. EG:

Code: 
var thumbnailImage = "http://img.com/img.jpg";
var thumbnailElement = document.getElementByID("thumbnailImg");

thumbnailElement.setAttribute("src", thumbnailImage);

Code: 
<img src="" alt="" id="thumbnailImg" />
 
You must log in or register to reply here.
Back
Top Bottom