chandroo Posted August 23, 2007 Share Posted August 23, 2007 Under your DHTML examples, I tried the ‘change the size of an image’. It works great with one picture set up.I tried the same on a second picture on the same page and it does not work. Is there a script that allows the same function of changing the size of an image on all the pictures I put up on a page?Appreciate any assistance anyone can give.Chandroo Link to comment Share on other sites More sharing options...
zppblood Posted August 23, 2007 Share Posted August 23, 2007 EDIT: To make more sense and what vchris says works.You should use an id value only once. That is probably why it isn't working. Link to comment Share on other sites More sharing options...
vchris Posted August 23, 2007 Share Posted August 23, 2007 I think the id attribute should be unique thing is only a guideline. It'll still work. Use class if you're going to use it on many images. Make sure they all have the same class or id name. If everything seems good then feel free to paste your code in here. Link to comment Share on other sites More sharing options...
chandroo Posted August 24, 2007 Author Share Posted August 24, 2007 Thanks for a prompt answer. I am new to the script and therefore am pasting below the example script for one picture only as can be also seen on the following link.http://www.w3schools.com/dhtml/tryit.asp?f...dhtml_imagesize I have used the ‘head’ script only once on the page and the ‘body’ with different .jpg references on 2 pictures. Only one works. I also changed the ‘Id’ to ‘class’ and still it does not work. Perhaps you can amend the script and advise me accordingly, so I can use it for around 10 pictures on one web page?ChandrooSCRIPT:<html><head><script type="text/javascript">function moveover(){document.getElementById('image').width="200"document.getElementById('image').height="360"}function moveback(){document.getElementById('image').width="100"document.getElementById('image').height="180"}</script></head><body><b>Mouse over the image:</b><br /><img id="image" src="bulbon.gif"onmouseover="moveover()"onmouseout="moveback()"width="100" height="180" /></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 24, 2007 Share Posted August 24, 2007 You don't even need an ID at all actually in this case. You can set up your image like this:<img src="bulbon.gif"onmouseover="moveover(this)"onmouseout="moveback(this)"width="100" height="180" />Note that you are sending "this" to the functions. When you send "this", it refers to the element itself. So in this context sending "this" to the functions will send a reference to that specific image. Then the function can just operate on whichever object you send it. You can use this for more then images too, if you do it on a div it will do the same thing:<div onmouseover="moveover(this)" onmouseout="moveback(this)" style="width: 100px; height: 180px;">test</div>To get your Javascript functions to use the object that was sent to them, you can modify them like this: <script type="text/javascript">function moveover(obj){ obj.width="200"; obj.height="360";}function moveback(obj){ obj.width="100"; obj.height="180";}</script> Link to comment Share on other sites More sharing options...
chandroo Posted August 24, 2007 Author Share Posted August 24, 2007 Hi JustSomeGuy!You are great! Your method worked. One more additional question. What additional script can I add to link the picture to a page or a larger version 'on click'?Thanks a million!Chandroo Link to comment Share on other sites More sharing options...
Synook Posted August 24, 2007 Share Posted August 24, 2007 You could just surround the picture with a hyperlink <a href="image.jpg" target="_blank"><img /></a>. Using JavaScript, you could do <img onclick="window.open('image.jpg')" />. Link to comment Share on other sites More sharing options...
chandroo Posted August 24, 2007 Author Share Posted August 24, 2007 Thanks Synook!How about if I want to add a text when the mouse rolls over the image? Could you kindly recommend a java script for that please?Thank you for your kind assistance.Chandroo Link to comment Share on other sites More sharing options...
Synook Posted August 25, 2007 Share Posted August 25, 2007 You mean like a tooltip? Just add the "title" attribute to your hyperlink: <a href="image.jpg" title="This is an image"><img /></a> The wording will appear after a short delay (about 0.5 seconds). Link to comment Share on other sites More sharing options...
jlhaslip Posted August 25, 2007 Share Posted August 25, 2007 More tooltip info can be found at this link. No js required, either... http://www.jlhaslip.com/samples/tooltips/ Link to comment Share on other sites More sharing options...
chandroo Posted August 26, 2007 Author Share Posted August 26, 2007 Hi Synook!Having a problem still. How can I incorporate the following 2 scripts:-a) <img onclick="window.open('image.jpg')" /> <a href="image.jpg" title="This is an image"><img /></a>into the following script to make it as one.<img src="bulbon.gif"onmouseover="moveover(this)"onmouseout="moveback(this)"width="100" height="180" />I would appreciate your kind assistance.Thank you.Chandroo Link to comment Share on other sites More sharing options...
Synook Posted August 26, 2007 Share Posted August 26, 2007 Err... you mean like <a title="This is an image"><img src="bulbon.gif" onmouseover="moveover(this)" onmouseout="moveback(this)" onclick="window.open('image.jpg')" width="100" height="180"/></a> Link to comment Share on other sites More sharing options...
chandroo Posted August 26, 2007 Author Share Posted August 26, 2007 Hi Synook!Great it works! The only thing is when you click the image, a normal 'arrow' pointer shows and not a 'hand' pointer to show when a picture is normally linked. Anyway to correct this?Thank you so much for having patience with me and teaching me.Chandroo Link to comment Share on other sites More sharing options...
Synook Posted August 26, 2007 Share Posted August 26, 2007 <a title="This is an image"><img src="bulbon.gif" onmouseover="moveover(this)" onmouseout="moveback(this)" onclick="window.open('image.jpg')" width="100" height="180" style="cursor:hand; " /></a> or <a title="This is an image" href="java script:window.open('image.jpg')"><img src="bulbon.gif" onmouseover="moveover(this)" onmouseout="moveback(this)" width="100" height="180" /></a> (the "java script:" should be one word!) Link to comment Share on other sites More sharing options...
chandroo Posted August 27, 2007 Author Share Posted August 27, 2007 Thanks Synook! The first script works very well. The second script does not. I like the colored frame coming on the image, but when clicking on image, not only does the correct picture comes up but also a second unnecessary blank page opens up and shows the word only [object]. Any correction on the second script? java script was corrected to one word.Chandroo Link to comment Share on other sites More sharing options...
Synook Posted August 27, 2007 Share Posted August 27, 2007 Hmm.. maybe the javascript protocol does not work with window.open. Oh well, just use the first method Link to comment Share on other sites More sharing options...
chandroo Posted August 27, 2007 Author Share Posted August 27, 2007 Hi Synook!It is a pity! I like the frame that comes on the image automatically. Anyway this can be done on the first script?Please refer to the following link:-http://www.swishzone.com/index.php?area=pr...mp;tab=overview I like the way the pointer shows an enlarged same picture on the side and at the same allowing it to enlarge separately. Anyway you can guide me on this script?Thanks.Chandroo Link to comment Share on other sites More sharing options...
Synook Posted August 28, 2007 Share Posted August 28, 2007 You could do this for the border (not sure whether it will work): <a title="This is an image" href="#"><img src="bulbon.gif" onmouseover="moveover(this)" onmouseout="moveback(this)" onclick="window.open('image.jpg')" width="100" height="180" style="cursor:hand; " /></a> Link to comment Share on other sites More sharing options...
chandroo Posted August 28, 2007 Author Share Posted August 28, 2007 Hi Synook!With the info from your 24th Aug message, I tested with the following script and it worked (included a border)!!<a title="This is an image" <a href="http:xxxxx.jpg" target="_blank"><img <img src="xxxx.jpg" onmouseover="moveover(this)" onmouseout="moveback(this)" width="160" height="120" /></a>Thanks a lot!Did you check out the link I sent you? Any chance of a script so the enlarged picture trails the pointer?Chandroo Link to comment Share on other sites More sharing options...
chandroo Posted September 8, 2007 Author Share Posted September 8, 2007 At the moment, the following script works when I move the mouse over the image, the image increases in size plus shows the captions.<script type="text/javascript">function moveover(obj){obj.width="256";obj.height="192";}function moveback(obj){obj.width="160";obj.height="120";}</script><a title="Hello" <a href="http://www.xxxxx.jpg" target="_blank"><img <img src="xxxx.jpg" onmouseover="moveover(this)" onmouseout="moveback(this)" width="160" height="120" /></a>Could you or anyone kindly help me in amending the script whereby by moving the mouse over the image, an enlarged version pops up and hangs on the mouse arrow tip plus shows the caption?Thank YouChandroo Link to comment Share on other sites More sharing options...
Synook Posted September 8, 2007 Share Posted September 8, 2007 Err... hi chandrooYour link is a bit garbled, it should look like this <a title="Hello" href="http://www.xxxxx.jpg" target="_blank"><img src="xxxx.jpg" onmouseover="moveover(this)" onmouseout="moveback(this)" width="160" height="120" /></a> Umm... I don't know how to make an image hover like that. Link to comment Share on other sites More sharing options...
chandroo Posted September 8, 2007 Author Share Posted September 8, 2007 Thanks for correcting me Synook! Surprisingly the script I give you also works.I have removed '<a' before 'href' and this works also.Hopefully some one out there can help me on my earlier question.Chandroo Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.