Solved

Write image to stationery div on mouse over

Posted on 2010-09-22
6
212 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

863 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now