All,
I have one question and one issue with my below php email script - the script
currently has the two images side by side when displayed in the e-mail -
I'd like the CSS z-index values as well as the transformation to be picked up
in the HTML e-mail when received - is this possible?
.imageOne {
z-index: 0;
}
.imageTwo {
z-index: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
One issue I also have is currently this sends the e-mail image one uploaded as well as the
sillouette one selected - however if one doesn't select an image the default value
the one located in the myImg[0] = "cat_image_sill"; does not show.
PHP code is below:
<?php
$to ="mysite@test.net";
$from = $_POST['from'];
$msg = $_POST['msg'];
$img1 = $_POST['imageOne'];
//$doc = new DomDocument();
//$img= $doc->getElementById('imageTwo');
$img2 = $_POST['imageTwo'];
//Mail Body - Position, background, font color, font size...
$body ='
<html>
<head>
<script type="text/javascript" src="nextPrevious.js"></script>
<style>
<!--
body, P.msoNormal, LI.msoNormal
{
background-position: top;
background-color: #336699;
margin-left: 10em;
margin-top: 1em;
font-family: "verdana";
font-size: 10pt;
font-weight:bold ;
color: "000000";
}
.container {
position: relative;
}
.imageOrig {
position: absolute;
}
.image {
position: absolute;
// width: 195px;
// height: 360px;
}
.imageOne {
z-index: 0;
}
.imageTwo {
z-index: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
.navigation {
width:430px;
height:211px;
}
-->
</style>
<script language="JavaScript">
function myOnload()
{
image = document.getElementById("imageTwo");
loadImg();
}
</script>
</head>
<body onload="myOnload()">';
$sillimg = '<a href="http://www.mysite.com/"><img src="http://www.mysite.com/custom_clock/'.$img1.'" name="imgSrcOrig" id="imgSrcOrig" class="imageOne imageOrig"></a>';
$mailimg = '<a href="http://www.mysite.com/"><img src="http://www.mysite.com/custom_clock/images/'.$img2.'" class="imageTwo image" id="imageTwo"></a>';
//To send HTML mail, the Content-type header must be set:
$headers='MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'To: System Admin <email@mysite.net>' . "\r\n";
$bodys .= "A custom clock image has just been uploaded an order for it should be processing soon<br><br>";
$bodys .= "$from";
$bodys .= "<br>";
$bodys .= "<div class='container'>";
$bodys .= "<table border='0'>";
$bodys .= "<tr>";
$bodys .= "<td valign='top' align='top'>";
#$bodys .= "<img name='hidimgSrcOrig' id='hidimgSrcOrig' class='imageOne imageOrig'>";
$bodys .= "$sillimg";
$bodys .= "$mailimg";
$bodys .= "<br/>";
$bodys .= "</td>";
$bodys .= "</tr>";
$bodys .= "</table>";
$bodys .= "</div>";
$subject .="Custom Clock Image";
$body .= $bodys . "</body></html>";
mail($to, $subject, $body, $headers);
?>
External JS File is below:
// List image names without extension
var myImg = new Array(4)
myImg[0] = "cat_image_sill";
myImg[1] = "cat_sill_image";
myImg[2] = "dog_image_sill";
myImg[3] = "dog_shape_3_still";
myImg[4] = "dog_shape_sill";
// Tell browser where to find the image
myImgSrc = "sills/";
// Tell browser the type of file
myImgEnd = ".png"
var i = 0;
// Create function to load image
function loadImg() {
document.imgSrcOrig.src = myImgSrc + myImg[i] + myImgEnd;
//document.getElementById('hidimgSrcOrig').value = myImg[i] + myImgEnd;
}
function SetImage()
{
document.imgSrcOrig.src = myImgSrc + myImg[i] + myImgEnd;
document.getElementById('imageOne').value = myImgSrc + myImg[i] + myImgEnd;
}
// Create link function to switch image backward
function prev()
{
if (i > 0) i--;
SetImage();
//alert(document.getElementById('imageOne').value);
}
function next()
{
if (i < (myImg.length -1)) i++;
SetImage();
//alert(document.getElementById('imageOne').value);
}
// Load function after page loads
window.onload = loadImg;