Solved

Write image to stationery div on mouse over

Posted on 2010-09-22
6
214 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript Case Expression 7 29
Jquery GMAP3 Hierarchy 1 24
Html5 Index on a table 7 26
PHP Form Calculate Total Price 10 41
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…
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…

786 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