By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,948 Members | 1,626 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,948 IT Pros & Developers. It's quick & easy.

Safari: img within a link object?

P: n/a
I'm attempting to dynamically add a link so I can take a mouseover
action on it and am having problems in Safari (this works fine in
Firefox and IE (Windows version of IE)). When I add the img object it
shows fine, but when I try to contain it within a link, it does not
display. I've tried using the IE and non-IE method below but neither
seem to work. Is this a bug in Safari or is there a different way to
achieve this? I was testing with Safari 1.3.2 on OS X 10.3.x

if (!isIE) {
oldImage = document.createElement("img");
oldImage.src = value;
oldImage.title = "";
newImage = document.createElement("link");
newImage.appendChild(oldImage);
} else {
newImage = document.createElement("<img src='" + value + " '
title='" + "" + "'>");
}
newImage.onmouseover = function(){
takeAction();
};
newImage.onmouseout = function(){
takeAction();
}

Thanks,
Steve

Apr 19 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
zo******@gmail.com wrote :
I'm attempting to dynamically add a link so I can take a mouseover
action on it and am having problems in Safari (this works fine in
Firefox and IE (Windows version of IE)). When I add the img object it
shows fine, but when I try to contain it within a link, it does not
display. I've tried using the IE and non-IE method below but neither
seem to work. Is this a bug in Safari or is there a different way to
achieve this? I was testing with Safari 1.3.2 on OS X 10.3.x

if (!isIE) {
Modern ways to detect browsers involve only object/features detection:
this method is more reliable and easier to implement and easier to manage.

Developing Cross Browser/Cross Platform Pages
http://www.mozilla.org/docs/web-deve...evCrossBrowser

Browser identification approach (aka "browser sniffing"): not best, not
reliable approach
http://www.mozilla.org/docs/web-deve...l#BrowserIdent

Using Object/Feature detection approach: best and overall most reliable
http://www.mozilla.org/docs/web-deve...jectFeatDetect

A Strategy That Works: Object/Feature Detecting by comp.lang.javascript
newsgroup FAQ notes
http://jibbering.com/faq/faq_notes/n...tect.html#bdFD

Browser detection - No; Object detection - Yes by Peter-Paul Koch
http://www.quirksmode.org/js/support.html

oldImage = document.createElement("img");
oldImage.src = value;
oldImage.title = "";
newImage = document.createElement("link");
This way of defining variables is weird and not recommendable (from a
debugging perspective, reviewing by others, reusing code, etc.): the
variable identifier says it's a new image but the execution only
involves the creation of a link. So, it's misleading.
newImage.appendChild(oldImage);
Shouldn't it be an anchor then? An <a>, not a <link>.

} else {
newImage = document.createElement("<img src='" + value + " '
title='" + "" + "'>");
}
newImage.onmouseover = function(){
takeAction();
};
newImage.onmouseout = function(){
takeAction();
}

Thanks,
Steve


Ok. I think I understand what you're trying to do here.

Try this:

if (document.createElement)
{
var oldImage = document.createElement("img");
oldImage.width = 100; // change that value
oldImage.height = 50; // change that value
oldImage.src = value;
oldImage.alt = "[some descriptive text]";

var objLink = document.createElement("a");
objLink.href = "[path]/filename.ext"; // change accordingly that
value
objLink.onmouseover = new Function ("evt", "takeAction()");
objLink.onmouseout = new Function ("evt", "takeAction()");
objLink.appendChild(oldImage);
}

Gérard
--
remove blah to email me
Apr 19 '06 #2

P: n/a
zo******@gmail.com wrote:
I'm attempting to dynamically add a link so I can take a mouseover
action on it and am having problems in Safari (this works fine in
Firefox and IE (Windows version of IE)). When I add the img object it
shows fine, but when I try to contain it within a link, it does not
display. I've tried using the IE and non-IE method below but neither
seem to work. Is this a bug in Safari or is there a different way to
achieve this? I was testing with Safari 1.3.2 on OS X 10.3.x

if (!isIE) {
oldImage = document.createElement("img");
oldImage.src = value;
oldImage.title = "";
newImage = document.createElement("link");
newImage.appendChild(oldImage);
} else {
newImage = document.createElement("<img src='" + value + " '
title='" + "" + "'>");
}
newImage.onmouseover = function(){
takeAction();
};
newImage.onmouseout = function(){
takeAction();
}


Are you sure you meant to create a '<link>' element rather than an <a>?

Are you appending the link element to anything?

Does this test do the sort of thing you wanted?

<html>
<body>
<script type="text/javascript"/">

function makePicLink(parentElem, onFunc, outFunc, addr, pic)
{
var aLink, clickImg;

aLink=document.createElement('a');
aLink.href=addr;
aLink.onmouseover=onFunc;
aLink.onmouseout=outFunc;
parentElem.appendChild( aLink );

clickImg=document.createElement('img');
clickImg.src=pic;
aLink.appendChild( clickImg );

}

makePicLink(document.body, function(){document.bgColor='#ff8000'},
function(){document.bgColor='#ffffff'}, '#', 'smiley.gif' );

</script>
</body>
</html>

Apr 19 '06 #3

P: n/a
ASM
zo******@gmail.com a écrit :
Is this a bug in Safari or is there a different way to
achieve this? I was testing with Safari 1.3.2 on OS X 10.3.x

if (!isIE) {
oldImage = document.createElement("img");
oldImage.src = value;
oldImage.title = "";
newImage = document.createElement("link");


newImage = document.createElement("A");

did you ever see a tag 'link' in body ?

--
Stephane Moriaux et son [moins] vieux Mac
Apr 24 '06 #4

P: n/a
ASM
Gérard Talbot a écrit :
zo******@gmail.com wrote :
if (!isIE) {
Modern ways to detect browsers involve only object/features detection:
this method is more reliable and easier to implement and easier to manage.


if you want to keep IE away you want to keep IE away !

isIE = false; /*@cc_on isIE=true; @*/

any need of complications
Try this:
OK that works in my IE (5.2 Mac)

But I have a problem with this IE
if I do :

var inpoot = document.createElement("input");
inpoot.type = 'text';

my IE stops here : "type is read only" does it clam.

How would you detect this soup ?

if (document.createElement)
{
var oldImage = document.createElement("img");
oldImage.width = 100; // change that value
oldImage.height = 50; // change that value
oldImage.src = value;
oldImage.alt = "[some descriptive text]";

var objLink = document.createElement("a");
objLink.href = "[path]/filename.ext"; // change accordingly that
value
objLink.onmouseover = new Function ("evt", "takeAction()");
objLink.onmouseout = new Function ("evt", "takeAction()");
objLink.appendChild(oldImage);
}

--
Stephane Moriaux et son [moins] vieux Mac
Apr 24 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.