Solved

Write image to stationery div on mouse over

Posted on 2010-09-22
6
217 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
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 82

Accepted Solution

by:
leakim971 earned 500 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

829 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