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

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

Jump to Post

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

Jump to Post

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 learning and sharing knowledge.