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;

Recommended Answers

All 5 Replies

Well - I think I'm giving up on the CSS z-index in the e-mail :)

However if anyone can help me with why the first element in the array doesn't come through in the submitted e-mail - that would be very helpful.

Just wanted to say... wow... Kudos for the title of your problem.

Thanks! I try to be as specific as possible!

I did adjust the order to operations in my mail script but the first element no matter what I do doesn't appear in the e-mail! All the other images do - so it's something with the onLoad in the e-mail I will assume:

<?php
$to ="mail@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...

$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>';

$body ='
<html>
<head>
<script type="text/javascript" src="nextPrevious.js"></script>
<style type="text/css">
<!--
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;
}

.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()">';
//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 <mail@test.net>' . "\r\n";
$bodys .= "A custom 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 .= "$sillimg";
$bodys .= "$mailimg"; 
$bodys .= "<br/>";
$bodys .= "</td>";
$bodys .= "</tr>";
$bodys .= "</table>";
$bodys .= "</div>";
$subject .="Custom Image";
$body .= $bodys . "</body></html>";
mail($to, $subject, $body, $headers);
?>

You can't insert JavaScript in emails. No email client allows JavaScript inside mails.

OK - well that comment got me thinking differently so I added this code to the mail scripts php and now it's all good:

if(empty($_POST['imageOne'])) 
{
  $img1 = "sills/cat_image_sill.png";
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.