Johnkobb
asked on
On Mouse Over display enlarged image in a new position
I have a list of products on my product's page as a menu (on the left site as images).
When I move the courser over one of the images with my mouse I want a new enlarged image to show up in the middle of my page.
Is it possible to do it in Dreamweaver?
Please provide an explanation what would be the easiest way to do it.
Best regards to all experts.
John C.
When I move the courser over one of the images with my mouse I want a new enlarged image to show up in the middle of my page.
Is it possible to do it in Dreamweaver?
Please provide an explanation what would be the easiest way to do it.
Best regards to all experts.
John C.
ASKER
I tried to implement the code from the link that you have provided and it did not work.
I don't know why.
Any other ideas?
Thank you very much for trying to help.
John K.
I don't know why.
Any other ideas?
Thank you very much for trying to help.
John K.
can you show me the code so i could help you out, and yes dreamweaver would be the best choice to use for this
ASKER
I took the code from the following link:
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
I have inserted the code in Dreamweaver as instructed and it did not work.
Also in this nice example 3 thumbnails are displayed only but no preloaded enlarged thumbnail.
I would like to have the first thumbnail/image enlarged (already showing) when the page loads in.
Thank you in advance for your help.
Regards,
John
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
I have inserted the code in Dreamweaver as instructed and it did not work.
Also in this nice example 3 thumbnails are displayed only but no preloaded enlarged thumbnail.
I would like to have the first thumbnail/image enlarged (already showing) when the page loads in.
Thank you in advance for your help.
Regards,
John
see if this works for you
function resizeL(img) {
img.height += "25";
img.width += "25";
}
function resizeS(img) {
img.height -= "25";
img.width -= "25";
}
function resizeL(img) {
img.height += "25";
img.width += "25";
}
function resizeS(img) {
img.height -= "25";
img.width -= "25";
}
function resizeL(img) {
img.height += "25";
img.width += "25";
}
function resizeS(img) {
img.height -= "25";
img.width -= "25";
}
<img onMouseOver="resizeL(this)
img.height += "25";
img.width += "25";
}
function resizeS(img) {
img.height -= "25";
img.width -= "25";
}
<img onMouseOver="resizeL(this)
ASKER
Thank you for your reply again.
I am not very good with scripts.
Where should I insert your provided function? In between the code from the provided link before?
As I mentioned before I have inserted in Dreamweaver the code provided in the link by THIRD.
When I previewd the page in a browser IE and I go over the menu link the "mouse over" function doesn't work because nothing happens. I don't know why?
Do you have any suggestions?
Maybe another code?
Thank you for your help and patience.
Best regards,
John
I am not very good with scripts.
Where should I insert your provided function? In between the code from the provided link before?
As I mentioned before I have inserted in Dreamweaver the code provided in the link by THIRD.
When I previewd the page in a browser IE and I go over the menu link the "mouse over" function doesn't work because nothing happens. I don't know why?
Do you have any suggestions?
Maybe another code?
Thank you for your help and patience.
Best regards,
John
ok here we go. i know im on the right path, jus take out the names of the other pics and jus put the name of the file of you pics. practice in notepad, dont use dreamweaver for stuff like this, jus copy in paste in notepad and save the file as a yourfilename.html, thats how i learned and practice
HERES The Code
<img id="bigImage" src="" style="display:none;" onerror="this.style.displa
<p>
<img src="image1" onmouseover="enlarge(this)
<img src="striper_guy_logo.gif"
<img src="image3.gif" onmouseover="enlarge(this)
<img id="bigImage" src="" style="display:none;" onerror="this.style.displa
<p>
<img src="image1" onmouseover="enlarge(this)
<img src="striper_guy_logo.gif"
<img src="image3.gif" onmouseover="enlarge(this)
ok this works for me, i hope it does for you, the one above will not work right because, enlarge and unenlarge is not defined
<script type="text/javascript">
function enlarge(t){
var e=document.getElementById(
e.src=t.src;
e.style.display="block";
}
function unEnlarge(){
var e=document.getElementById(
e.src="";
e.style.display="none";
}
</script>
<script type="text/javascript">
function enlarge(t){
var e=document.getElementById(
e.src=t.src;
e.style.display="block";
}
function unEnlarge(){
var e=document.getElementById(
e.src="";
e.style.display="none";
}
</script>
sorry about the bad posting, i just got tickets for the cavs vs pistons game, and im kinda to excited lol, but here is the full code, take the image names out and replace wit your own image names that you have
<script type="text/javascript">
function enlarge(t){
var e=document.getElementById(
e.src=t.src;
e.style.display="block";
}
function unEnlarge(){
var e=document.getElementById(
e.src="";
e.style.display="none";
}
</script>
<img id="bigImage" src="" style="display:none;" onerror="this.style.displa
<p>
<img src="image1" onmouseover="enlarge(this)
<img src="striper_guy_logo.gif"
<img src="image3.gif" onmouseover="enlarge(this)
<script type="text/javascript">
function enlarge(t){
var e=document.getElementById(
e.src=t.src;
e.style.display="block";
}
function unEnlarge(){
var e=document.getElementById(
e.src="";
e.style.display="none";
}
</script>
<img id="bigImage" src="" style="display:none;" onerror="this.style.displa
<p>
<img src="image1" onmouseover="enlarge(this)
<img src="striper_guy_logo.gif"
<img src="image3.gif" onmouseover="enlarge(this)
ASKER
Hello again,
Thank you for trying to help me and I am glad to hear that you got the tickets.
I have implemented your code and substituted the images for my own as you suggested.
This work only partialy. When I go over with my mouse the original picture is jumping and no new larger image is showing.
I want something like this, have a look at this web site example - this is done in Firework but I want the same efects in java if possible: http://www.entheosweb.com/fireworks/swap_images.asp
On my web site I have a few small images on the left and right side of my page and what I want is when I move my mouse over one small image/thumbnail of a shoe I want it to be displayed in a new larger (pop up) window in the middle.
To give you an indication what it looks like here is a link to the unfinished page that we need the code for: http://www.patv.com.au/Associates/Elfs/Elfs-Clog%20Colours.html
At present there is a different display like a continues movie but we want to change it to the type I just described above. And the small pictures of shoes at present it is just one image but it will be changed to individual images/small thumbnils.
I hope that you understand, if not please ask for more explanations.
Thank you in advance for your help.
Best regards,
John from Downunder - Australia
Thank you for trying to help me and I am glad to hear that you got the tickets.
I have implemented your code and substituted the images for my own as you suggested.
This work only partialy. When I go over with my mouse the original picture is jumping and no new larger image is showing.
I want something like this, have a look at this web site example - this is done in Firework but I want the same efects in java if possible: http://www.entheosweb.com/fireworks/swap_images.asp
On my web site I have a few small images on the left and right side of my page and what I want is when I move my mouse over one small image/thumbnail of a shoe I want it to be displayed in a new larger (pop up) window in the middle.
To give you an indication what it looks like here is a link to the unfinished page that we need the code for: http://www.patv.com.au/Associates/Elfs/Elfs-Clog%20Colours.html
At present there is a different display like a continues movie but we want to change it to the type I just described above. And the small pictures of shoes at present it is just one image but it will be changed to individual images/small thumbnils.
I hope that you understand, if not please ask for more explanations.
Thank you in advance for your help.
Best regards,
John from Downunder - Australia
ok here ya go, i did this through dreamweaver myself lol. i dont know if you want the step by step code in order for you to make this through dreamweaver your self but, it was very simple to do, wish i woulda done before, im goin to post my code of a image i did my self, hope it makes some since.
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:442px;
height:277px;
z-index:1;
left: 12px;
top: 16px;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_pre
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&p
d=parent.frames[n.substrin
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;
for(i=0;!x&&d.layers&&i<d.
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arg
if ((x=MM_findObj(a[i]))!=nul
}
//-->
</script>
<body onload="MM_preloadImages('
<img src="striper_guy_logo.gif"
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:442px;
height:277px;
z-index:1;
left: 12px;
top: 16px;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_pre
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&p
d=parent.frames[n.substrin
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;
for(i=0;!x&&d.layers&&i<d.
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arg
if ((x=MM_findObj(a[i]))!=nul
}
//-->
</script>
<body onload="MM_preloadImages('
<img src="striper_guy_logo.gif"
ASKER
Hi,
I have inserted the code in to Dreamweaver but it doesn't work. I substituted your image also.
I dont't know what else to do.
Am I supose to copy and paste your whoe code in to Dreamweaver?
As I steted before I am not good with scripts.
Please explain in details what should I do. Maybe I'm doing something wrong.
I have to go to bed now because it is almost 6am and the birds started singing already :-)
Waiting for your reply when I wake up :-)
Best regards,
John
I have inserted the code in to Dreamweaver but it doesn't work. I substituted your image also.
I dont't know what else to do.
Am I supose to copy and paste your whoe code in to Dreamweaver?
As I steted before I am not good with scripts.
Please explain in details what should I do. Maybe I'm doing something wrong.
I have to go to bed now because it is almost 6am and the birds started singing already :-)
Waiting for your reply when I wake up :-)
Best regards,
John
ok im doin this as i type, please let me know any steps that are unclear, im using dreamweaver 8
1. open dreamweaver
2.select new html file
3.go up to insert then go to image
4.browse to the image you want(just pic one till you get the hang of it) it may ask you to make a doc relative path? just hit ok, then if you have a site then it might ask you its outside of your site, dont worry about that just hit no. if none of those steps happen for you then just click ok for the image tag accessibilty.
5. now you should be in the design view of your html, now go up to windows and select behaviors(a side bar should pop up on the left, if not click the arrow to open it)
6.(make sure the photo is selected) then in the behaviors bar there a icon with a plus sign and a down arrow, click that and go to swap image
7.dont worry about changing names, now go to set source to and browse for that same photo that you already have in your html. and make sure that preload images is checked and that restore images is checked.
8. now when you go to preview in browser nothin happens when you roll over the image because there both the same size two ways to fix this, change the size of the rollover image or just edit that image and make it bigger, call it image2 and make that the rollover.
let me know if u have any problems
1. open dreamweaver
2.select new html file
3.go up to insert then go to image
4.browse to the image you want(just pic one till you get the hang of it) it may ask you to make a doc relative path? just hit ok, then if you have a site then it might ask you its outside of your site, dont worry about that just hit no. if none of those steps happen for you then just click ok for the image tag accessibilty.
5. now you should be in the design view of your html, now go up to windows and select behaviors(a side bar should pop up on the left, if not click the arrow to open it)
6.(make sure the photo is selected) then in the behaviors bar there a icon with a plus sign and a down arrow, click that and go to swap image
7.dont worry about changing names, now go to set source to and browse for that same photo that you already have in your html. and make sure that preload images is checked and that restore images is checked.
8. now when you go to preview in browser nothin happens when you roll over the image because there both the same size two ways to fix this, change the size of the rollover image or just edit that image and make it bigger, call it image2 and make that the rollover.
let me know if u have any problems
ASKER
Hello again.
Ok, I have done that and everything works fine. I have used 2 diferent images. They change on mouse over. Beautiful.
Now.
When I move the mouse over an image on the left side of my page (a thumbnail) I want larger image to show up in a diferent/seperate larger window in a middle of my page.
Please see example on this page: http://www.entheosweb.com/fireworks/swap_images.asp
This was done Designing Swap Images in Fireworks, but is it possible to have this done using Java Script???
Thanks for your help.
John
Ok, I have done that and everything works fine. I have used 2 diferent images. They change on mouse over. Beautiful.
Now.
When I move the mouse over an image on the left side of my page (a thumbnail) I want larger image to show up in a diferent/seperate larger window in a middle of my page.
Please see example on this page: http://www.entheosweb.com/fireworks/swap_images.asp
This was done Designing Swap Images in Fireworks, but is it possible to have this done using Java Script???
Thanks for your help.
John
well i dont have fireworks on my pc, so i cant do that feature. in order for you to do what you have intended in the link above you have to have fireworks installed on your pc so you can use it for dreamweaver
ASKER
But my question was if it is possible to have the same effect without using Fireworks.
Another words if it is possible to use Dreamweaver and Java script to open a larger image in a new location on the same page as I described in my previous post.
This would be much simplear than using Fireworks.
John
Another words if it is possible to use Dreamweaver and Java script to open a larger image in a new location on the same page as I described in my previous post.
This would be much simplear than using Fireworks.
John
no there is not, see fireworks is a template and what that link you got up above is a template, its very easy to do, but you have to find it somewhere or pay for it. if you find that template then i would be more than happy to help you. and yea im sure there is some code that when the mouse rolls over the pic that it can be seen right of it in a larger image, but im not sure what that code is, all i can think of to help you is when you put the mouse over the image it just enlarges it, which i showed you how in the previous post.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hello again and thatnk you again for trying to help.
I followed your instructions and replaced the images with my own.
I get the new page with my images on it but when I move mouse over the image nothing happens.
Is it possible to acheve what I want using just Dreamwever?
Best regards,
John
I followed your instructions and replaced the images with my own.
I get the new page with my images on it but when I move mouse over the image nothing happens.
Is it possible to acheve what I want using just Dreamwever?
Best regards,
John
ASKER
Hi Pioneermfg
Sorry for my late reply and thank you for trying to help.
Finally I managed to achieve what I wanted using Dreamweaver and Behaviours.
I have accepted your answers as solution because you have tried to help me.
Thanks again.
Best regards
John
Sorry for my late reply and thank you for trying to help.
Finally I managed to achieve what I wanted using Dreamweaver and Behaviours.
I have accepted your answers as solution because you have tried to help me.
Thanks again.
Best regards
John
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm