Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Write image to stationery div on mouse over

Posted on 2010-09-22
6
Medium Priority
?
220 Views
Last Modified: 2012-05-10
Hi Guys,
I hava a client file exhchange area where clients upload files of approved types.
When I mouse over a 'view' link associated with a file in a list, I would like to be able to:
1) pass the name of the file to a javascript function
2) check the last three letters to see if it is an image file and if it is set a variable to that file name.
3) write the image tag using filepath variable and filename
4) show the image in the div

Here is my code.
I am not getting any errors, but it doesn't work either.
any help is greatly appreciated:

<script language="JavaScript">
   function imgintodiv(gfile){
        var ltc = gfile.substr(1,gfile.length-3);
            if (ltc == 'png' OR ltc=='gif' OR ltc=='jpg' OR ltc=='bmp' OR ltc=='psd'){
                 var filename = gfile;
                   alert(filename);
            }else{
                  var filename = ltc + '.png';
                   alert(filename);
            }
            var filepath = '$fdir' + filename;
            var newic = '<img src=+filepath+ />';
            document.getElementById("pfi").innerHTML=newic;
      }
</script>
$fldr is a php variable containing the file path

thanks in advance
0
Comment
Question by:dotinfiniti
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 9

Expert Comment

by:rfportilla
ID: 33740839
The only way I know how to do this is with ajax.  There are ajax libs available.  Here is how I would structure it.  Others might have a simpler way.

1. create a php file that will read and serve out an image file based on name.  It would be nice if this php code could also bring scale down the image to the appropriate size.
2. create a form that submits to a hidden target in your html that will check if the file is an image and give you url of the file.  You will have to parse out this content from the return.  The url should point to the image server php file with the appropriate parameters for getting the correct image.
3. update the picture frame that you are using to point to the image url.

The image php file isn't necessary, but I like it for scaling the image down and/ or controlling what gets served out.  Also, if you are storing your images in a database, this is the only way.
0
 
LVL 3

Expert Comment

by:uniqueinfotech
ID: 33740868
Just reviewing your code, javascript's substring function takes (start, length), so you need to change your program to

var ltc = gfile.substr(gfile.length - 3, 3);

to return the last 3 letter extension. The way you have it it's returning the everything but the last 3 letters.

Also, to make the script run when you mouseover a standard a href link, you can use the following:

<a href="filename.jpg" onMouseOver="a('filename.jpg')">filename.jpg</a>
0
 

Author Comment

by:dotinfiniti
ID: 33741688
I had to laugh when I read your explaination unique, thanks for leading me in the right direction.
The code still isn't working.
I am begining to think that it has something to do with PHP (the two languages are almost intentical.). May they get confused.

The problem is even if I do the bulk of the code in PHP, I still need the mouseover done in javascript. So I am back where I started.

again, any suggestions are appreciated.
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 33745457
replace :
var newic = '';

By :
var newic = '';

Test page :


<!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" />
<title>Untitled Document</title>
<script language="JavaScript">
	function imgintodiv(gfile) {
		var ltc = gfile.substr(gfile.length - 3, 3);;
		if (ltc == 'png' || ltc=='gif' || ltc=='jpg' || ltc=='bmp' || ltc=='psd') {
			var filename = gfile;
			alert(filename);
		}
		else {
			var filename = ltc + '.png';
			alert(filename);
		}
//		var filepath = '$fdir' + filename;
		var filepath = "http://www.guadeloupe-reve-nautique.fr/Photos/" + filename;
		var newic = '<img src="' + filepath + '" />';
		document.getElementById("pfi").innerHTML = newic; 
	}
</script>
</head>
<body onload="imgintodiv('Guadeloupe.png')">
<div id="pfi"></div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:dotinfiniti
ID: 33749394
Thanks!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33749665
You're welcome! Thanks for the points!
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question