PHP Email Script using z-index and array

Question

koneill5 Newbie Poster

10 Years Ago

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;

php

2 Contributors
5 Replies
301 Views
1 Week Discussion Span
Latest Post 10 Years Ago Latest Post by koneill

Adrian_51 Light Poster

10 Years Ago

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

Adrian_51 Light Poster

10 Years Ago

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

Reply to this topic

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.

koneill5 Newbie Poster · Answer 1 · 2014-10-31T02:20:05+00:00

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.

koneill5 Newbie Poster · Answer 2 · 2014-11-01T15:39:07+00:00

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); ?>

koneill5 Newbie Poster · Answer 3 · 2014-11-04T01:58:29+00:00

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"; }