Solved

Write image to stationery div on mouse over

Posted on 2010-09-22
6
210 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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

762 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

18 Experts available now in Live!

Get 1:1 Help Now